/* =========================================================
   SOGNARE YACHTS — 3D EFFECTS LAYER
   Premium depth, glare, perspective & particle system
   UI/UX Pro Max + Emil Kowalski principles applied
   ========================================================= */

/* === SHARED CSS VARS (extend main tokens) =================== */
:root {
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --gold-glow:     rgba(201, 168, 76, 0.14);
  --gold-glow-sm:  rgba(201, 168, 76, 0.06);
}

/* === GLARE CARD SYSTEM ======================================= */
/*
   Usage: JS adds .sg-glare-wrap + injects .sg-glare child.
   Mouse position fed via CSS vars --mx / --my.
*/
.sg-glare-wrap {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.sg-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    500px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 350ms ease;
  mix-blend-mode: screen;
  will-change: background;
}

.sg-glare-wrap:hover .sg-glare {
  opacity: 1;
}

/* === PHOTO STRIP — 3D PERSPECTIVE =========================== */
.photo-strip {
  perspective: 1600px;
  perspective-origin: 50% 35%;
}

.photo-strip-grid picture {
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: box-shadow 450ms var(--ease-out-expo);
}

.photo-strip-grid picture:hover {
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(201, 168, 76, 0.15);
  z-index: 3;
  position: relative;
}

/* === GALLERY — DEPTH ON HOVER =============================== */
.gallery-grid {
  perspective: 1200px;
}

.gallery-grid picture {
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: box-shadow 400ms var(--ease-out-expo);
}

.gallery-grid picture:hover {
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(201, 168, 76, 0.12);
  z-index: 2;
  position: relative;
}

/* === FEATURED IMAGE — PRESERVE 3D =========================== */
.featured-image-wrap {
  transform-style: preserve-3d;
}

.featured-image {
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

/* === INTRO VISUAL — 3D WRAP ================================= */
.intro-visual {
  transform-style: preserve-3d;
  will-change: transform;
}

/* === SPEC ITEMS — DEEP 3D =================================== */
.featured-specs {
  perspective: 900px;
}

.spec-item {
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
}

/* === USP ITEMS — 3D ========================================= */
.usp-grid {
  perspective: 1100px;
}

.usp-item {
  transform-style: preserve-3d;
  will-change: transform;
}

/* === BUILD STEP CARDS ======================================== */
.build-grid {
  perspective: 1000px;
}

.build-step {
  transform-style: preserve-3d;
  will-change: transform;
}

/* === TEAM CARDS ============================================== */
.team-grid {
  perspective: 1000px;
}

.team-item {
  transform-style: preserve-3d;
  will-change: transform;
}

/* === CURSOR GLOW — FEATURED + USP SECTION ===================
   Overlay via ::before — originele achtergrond blijft intact.
*/
.featured,
.usp-section {
  position: relative;
}

.featured::before,
.usp-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    900px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(201, 168, 76, 0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}

.featured:hover::before,
.usp-section:hover::before {
  opacity: 1;
}

.featured > *,
.usp-section > * {
  position: relative;
  z-index: 1;
}

/* === OCEAN CANVAS — PROEFVAART BG =========================== */
.proefvaart-section {
  position: relative;
  overflow: hidden;
}

#sg-ocean-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s ease;
}

#sg-ocean-canvas.sg-visible {
  opacity: 1;
}

/* Ensure overlay + content sit above the canvas layer.
   Do NOT touch picture/.proefvaart-bg — it is position:absolute. */
.proefvaart-overlay {
  z-index: 2;
}
.proefvaart-content {
  position: relative;
  z-index: 4;
}

/* === FLOATING GOLD PARTICLES ================================= */
@keyframes sg-float {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0; }
  12%  { opacity: var(--p-op, 0.5); }
  88%  { opacity: calc(var(--p-op, 0.5) * 0.25); }
  100% { transform: translate(var(--dx, 20px), -140px) scale(0.4); opacity: 0; }
}

.sg-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.sg-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold, #C9A84C);
  pointer-events: none;
  animation: sg-float var(--dur, 5s) var(--dly, 0s) ease-in infinite;
  will-change: transform, opacity;
}

/* === CTA BANNER GLOW ========================================= */
.cta-banner {
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(201, 168, 76, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: sg-pulse-glow 5s ease-in-out infinite;
}

.cta-banner > * {
  position: relative;
  z-index: 1;
}

@keyframes sg-pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

/* === MARQUEE — GOLD SWEEP ==================================== */
@keyframes sg-sweep {
  0%   { background-position: -300% center; }
  100% { background-position: 300% center; }
}

.marquee-track {
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 42%,
    rgba(201, 168, 76, 0.55) 50%,
    transparent 58%,
    transparent 100%
  );
  background-size: 400% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: sg-sweep 8s linear infinite;
}

/* === NAV — ENHANCED FROSTED GLASS ============================
   main.js adds .scrolled; we only upgrade the backdrop-filter
   and add a gold accent line. No background override — the
   existing rgba(247,245,241,0.96) from style.css stays intact
   so logo/text colors remain correct.
*/
.nav.scrolled {
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom-color: rgba(201, 168, 76, 0.18) !important;
}

/* === HERO — DEPTH FEEL ======================================= */
.hero-content {
  will-change: transform;
}

/* Force hero video onto its own GPU layer — prevents render
   glitch (trembling) at the video loop point when GSAP parallax
   transform is active on the same element. */
.hero-video {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* === LETTER-BY-LETTER REVEAL (sg-split class) ================ */
.sg-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}

.sg-word {
  display: inline-block;
  transform-origin: 50% 110%;
  will-change: transform, opacity;
}

/* Force a margin between word wraps */
.sg-word-wrap + .sg-word-wrap {
  margin-left: 0.28em;
}

/* === LINE ACCENT — SCROLL REVEAL ============================ */
.sg-line-reveal {
  position: relative;
}

.sg-line-reveal::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 100%;
  background: var(--gold, #C9A84C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out-expo) 300ms;
}

.sg-line-reveal.sg-in::after {
  transform: scaleX(1);
}

/* === SHADOW DEPTH SYSTEM ==================================== */
.sg-depth {
  transition: box-shadow 400ms var(--ease-out-expo),
              transform 400ms var(--ease-out-expo);
}

/* === REDUCED MOTION — FULL KILL-SWITCH ====================== */
@media (prefers-reduced-motion: reduce) {
  .sg-particle              { animation: none !important; }
  .cta-banner::before       { animation: none !important; }
  .marquee-track            { animation: sg-marquee linear infinite !important;
                              background: none !important; color: inherit !important; }
  #sg-ocean-canvas          { display: none !important; }
  .sg-glare                 { display: none !important; }
  .sg-word                  { transform: none !important; opacity: 1 !important; }
  .hero-content             { will-change: auto !important; }
}