/* ============================================================
   CRAVIN — BRAND-MOTION LAYER v1
   Loaded AFTER css/site.css. Does two things only:
   1) Overrides the existing :root colour variables (same variable
      NAMES site.css already defines) so every existing rule in
      site.css repaints in the deeper forest / champagne-gold
      palette from the approved template set — no markup changes
      required for the colour reskin.
   2) Adds the template's motion system (page curtain, scroll
      reveals, split-word headlines, marquees, cursor field, hero
      Ken Burns, frame-sequence video player) under NEW class/data-
      attribute names that do not exist in site.css, so nothing is
      overridden or removed — only added.
   Nothing in this file deletes or renames anything from site.css.
   ============================================================ */

:root{
  /* ---- palette reskin: same variable names as site.css :root ---- */
  --black:#141004;
  --forest-deep:#0D2B1B;
  --forest:#173A25;
  --forest-mid:#446B56;
  --gold:#E3B76E;
  --gold-light:#EDC98C;
  --gold-dark:#C99A4C;
  --cream:#FAF5E5;
  --khaki:#EEE9C4;
  --olive:#9FA273;
  --olive-deep:#77815B;
  --ink:#374D3F;
  --line:#E3E0CF;
  /* --muted, --text-on-dark, --purple*, --shadow, --radius kept as
     site.css defines them — text-on-dark stays pure white on purpose,
     matching site.css's own note that pale gold hurts legibility on
     dark panels/photos; purple already equals the template's single
     booking-CTA purple (#800080), so no change needed there. */

  /* ---- extra tokens used only by the motion layer below ---- */
  --grad-forest:linear-gradient(140deg,#08170E 0%,#0D2B1B 46%,#173A25 100%);
  --grad-gold:linear-gradient(100deg,#8A6A20 0%,#E3B76E 36%,#FAEFD8 51%,#E3B76E 66%,#8A6A20 100%);
  --grad-band:linear-gradient(90deg,#173A25 0 46%,#C99A4C 46% 78%,#0D2B1B 78%);
  --grad-sunset:linear-gradient(135deg,#8A4A12 0%,#D98324 44%,#F2C078 100%);
  --grad-dusk:linear-gradient(160deg,#08170E 0%,#113321 38%,#5C3A12 78%,#B4661C 100%);
  --ease:cubic-bezier(.22,.68,0,1.01);
  --ease-soft:cubic-bezier(.25,.7,.4,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sh-gold:0 22px 46px -20px rgba(201,154,76,.5);
}

/* ================= PAGE CURTAIN (nav wipe) ================= */
.curtain{position:fixed;inset:0;z-index:9997;display:flex;pointer-events:none;}
.curtain i{flex:1;background:var(--forest-deep);transform:scaleY(1);transform-origin:top;
  transition:transform .45s var(--ease);}
.curtain i:nth-child(1){transition-delay:0s}
.curtain i:nth-child(2){transition-delay:.04s}
.curtain i:nth-child(3){transition-delay:.08s}
.curtain i:nth-child(4){transition-delay:.12s}
.curtain i:nth-child(5){transition-delay:.16s}
.curtain__mark{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display,'Playfair Display',serif);font-size:clamp(1.2rem,3.6vw,2rem);
  color:var(--gold);letter-spacing:.3em;transition:opacity .4s;}
.curtain.open i{transform:scaleY(0);}
.curtain.open .curtain__mark{opacity:0;}
.curtain.close i{transform:scaleY(1);transform-origin:bottom;}
.curtain.close .curtain__mark{opacity:1;transition-delay:.25s;}

/* ================= SCROLL PROGRESS BAR ================= */
.scrollbar-top{position:fixed;top:0;left:0;height:2px;z-index:999;background:var(--grad-gold);width:0;}

/* ================= SCROLL REVEALS (template layer — additive) =================
   Uses data-reveal so it never collides with site.css's existing .reveal/.in-view
   system, which stays exactly as-is and keeps driving what it already drives. */
[data-reveal]{opacity:0;transform:translateY(30px);}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity 1s var(--ease-out) var(--rd,0ms),transform 1s var(--ease-out) var(--rd,0ms);}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(-44px);}
[data-reveal="right"]{transform:translateX(44px);}
[data-reveal="zoom"]{transform:scale(.94);}
[data-reveal="clip"]{opacity:1;clip-path:inset(0 0 100% 0);}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease) var(--rd,0ms);}
.imgrev{overflow:hidden;position:relative;}
.imgrev > img,.imgrev > .bg{transform:scale(1.28);transition:transform 1.6s var(--ease);}
.imgrev.in > img,.imgrev.in > .bg{transform:scale(1);}

/* word-by-word split headline */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em;}
.split .w > *{display:inline-block;transform:translateY(108%);
  transition:transform 1.05s var(--ease) var(--wd,0ms);}
.split.in .w > *{transform:translateY(0);}
/* char stagger (small labels) */
.chars .c{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .5s var(--ease) var(--cd,0ms),transform .6s var(--ease) var(--cd,0ms);}
.chars.in .c{opacity:1;transform:none;}

/* ================= MARQUEE BAND ================= */
.marquee{display:flex;overflow:hidden;user-select:none;
  transform:skewY(calc(var(--vel,0) * .18deg));transition:transform .5s var(--ease-soft);}
.marquee__track{display:flex;flex-shrink:0;gap:2.4rem;padding-right:2.4rem;align-items:center;
  animation:cravinMarq var(--mspeed,28s) linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee--rev .marquee__track{animation-direction:reverse;}
@keyframes cravinMarq{to{transform:translateX(-100%);}}
.pmarq{border-block:1px solid var(--line);padding:18px 0;background:#fff;}
.pmarq .marquee__track{font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(1.1rem,2vw,1.5rem);color:var(--forest);}
.pmarq .marquee__track i{font-style:normal;color:var(--gold-dark);padding:0 2.4rem;}
.pmarq--dark{background:var(--forest-deep);border-color:rgba(255,255,255,.12);}
.pmarq--dark .marquee__track{color:var(--text-on-dark,#fff);}

/* ================= CURSOR (desktop only, opt-in via body[data-cursor]) ================= */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9990;border-radius:50%;}
.cursor-dot{width:6px;height:6px;background:var(--gold);margin:-3px 0 0 -3px;}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(227,183,110,.6);margin:-18px 0 0 -18px;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;}
.cursor-ring.big{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(227,183,110,.13);}
@media(hover:none),(max-width:900px){.cursor-dot,.cursor-ring{display:none;}}

/* ================= POINTER FIELD (aurora blobs + dust + spotlight) ================= */
.pfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --mx:50vw;--my:50vh;--mnx:.5;--mny:.5;}
.pfx__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  will-change:transform;transform:translate3d(-50%,-50%,0);}
.pfx__blob--a{width:42vw;height:42vw;background:radial-gradient(closest-side,rgba(217,131,36,.4),transparent 70%);
  left:var(--bax,50%);top:var(--bay,50%);}
.pfx__blob--b{width:36vw;height:36vw;background:radial-gradient(closest-side,rgba(23,58,37,.4),transparent 70%);
  left:var(--bbx,50%);top:var(--bby,50%);}
.pfx__blob--c{width:28vw;height:28vw;background:radial-gradient(closest-side,rgba(227,183,110,.35),transparent 70%);
  left:var(--bcx,50%);top:var(--bcy,50%);}
.pfx__spot{position:absolute;inset:0;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(227,183,110,.10),transparent 68%);}
.pfx__dust{position:absolute;inset:0;}
.pfx__dust i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(227,183,110,.5);will-change:transform;}
.pfx__grid{position:absolute;inset:-10%;opacity:.08;
  background-image:linear-gradient(rgba(23,58,37,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,58,37,.13) 1px,transparent 1px);
  background-size:74px 74px;
  transform:translate3d(calc((var(--mnx) - .5) * -26px),calc((var(--mny) - .5) * -26px),0);
  transition:transform .5s cubic-bezier(.16,1,.3,1);}
@media (hover:none){.pfx__blob,.pfx__dust,.pfx__spot{display:none;}}
@media (prefers-reduced-motion:reduce){.pfx{display:none;}}

/* foreground pointer motes that stay visible over content */
.pfx-top{position:fixed;inset:0;z-index:880;pointer-events:none;overflow:hidden;--mx:50vw;--my:50vh;}
.pfx-top i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(250,238,210,.6);will-change:transform;box-shadow:0 0 7px rgba(227,183,110,.6);}
.pfx-top .pfx-top__halo{position:absolute;width:480px;height:480px;border-radius:50%;
  left:var(--mx);top:var(--my);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(227,183,110,.09),transparent 72%);mix-blend-mode:screen;}
.pfx-top .pfx-top__ring{position:absolute;left:var(--mx);top:var(--my);
  width:var(--rs,180px);height:var(--rs,180px);border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid rgba(227,183,110,.14);}
@media (hover:none){.pfx-top{display:none;}}
@media (prefers-reduced-motion:reduce){.pfx-top{display:none;}}

/* per-section cursor spotlight, opt-in with data-spotlight */
[data-spotlight]{position:relative;isolation:isolate;}
[data-spotlight]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:var(--so,0);transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(227,183,110,.14),transparent 70%);}

/* pointer-parallax: [data-pp="24"] drifts 24px with the cursor */
[data-pp]{will-change:transform;
  transform:translate3d(calc(var(--ppx,0) * 1px),calc(var(--ppy,0) * 1px),0);
  transition:transform .6s cubic-bezier(.16,1,.3,1);}

/* ================= FILM GRAIN (opt-in via body.grain) ================= */
.grain::after{
  content:"";position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainMove 8s steps(6) infinite;}
@keyframes grainMove{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}
}

/* ================= HERO KEN BURNS (home hero only — CSS-only, no markup change) =================
   site.css already paints .hero with url('../images/site/hero3.webp') as a CSS
   background. This just adds a slow drift/zoom to that same background — the
   image, overlay gradient and layout from site.css are untouched. */
#home .hero,
.page#home .hero{
  background-size:112% auto, cover;
  animation:cravinKenBurns 22s ease-in-out infinite alternate;
}
@keyframes cravinKenBurns{
  0%{background-position:50% 42%, center 60%; background-size:112% auto, cover;}
  100%{background-position:56% 50%, center 55%; background-size:124% auto, cover;}
}

/* ================= FRAME / VIDEO HERO PLAYER =================
   Drop-in hero video wrapper used on interior service pages, using
   motion.js's own sequences() mount point verbatim:
     <div class="seq" data-seq="videos/seq/NAME" data-frames="1">
       <div class="seq__veil"></div>
     </div>
   motion.js mounts <video src="videos/seq/NAME.mp4?v=5" poster="videos/seq/NAME/f00.webp?v=5">
   into it: muted/loop/playsinline/autoplay, paused off-screen, resumed
   on-screen, and — under prefers-reduced-motion — replaced with a still
   <img> of the poster frame instead of ever playing. Nothing here needs
   editing per page beyond the data-seq path. */
.seq{position:relative;overflow:hidden;background:var(--forest-deep);}
.seq__frames{position:absolute;inset:0;}
.seq__frames video,.seq__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.seq__veil{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(5,10,4,.65) 0%,rgba(5,10,4,.35) 30%,rgba(5,10,4,.45) 70%,rgba(5,10,4,.85) 100%);}

/* ================= REDUCED MOTION — global kill switch ================= */
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important;}
  .split .w>*,.chars .c{transform:none !important;opacity:1 !important;}
  .imgrev > img,.imgrev > .bg{transform:none !important;}
  .curtain{display:none !important;}
  #home .hero,.page#home .hero{animation:none !important;}
}