/* =====================================================================
   COAST 67 — "The Tide" motion layer  (v2 — official brand system)
   Palette + type per Coast 67 Brand Guide. Scoped to body.coast67-tide.
   Respects prefers-reduced-motion. Progressive enhancement only.

   Brand palette:
     Persian Orange #D6894E (primary)   Davy's Grey #4E4F47 (ink/dark)
     Floral White  #FBF3E8 (light)      Gold Crayola #F5C888
     Opal          #ADD2CB              Cadet Blue   #5F9FA9
   Type (official brand fonts):
     Display/headers = Minimalust   ·   sub-headers/UI = Bantayog
     body = Gowa (serif)   ·   captions = Beau (serif)
   ===================================================================== */

.coast67-tide {
  --c67-orange: #D6894E;
  --c67-orange-deep: #C2773B;
  --c67-ink: #4E4F47;
  --c67-ink-soft: #6B6C62;
  --c67-cream: #FBF3E8;
  --c67-cream-deep: #F3E7D5;
  --c67-gold: #F5C888;
  --c67-opal: #ADD2CB;
  --c67-teal: #5F9FA9;
  --c67-ease: cubic-bezier(.16, 1, .3, 1);
  --c67-ease-io: cubic-bezier(.65, .05, .36, 1);
  --c67-display: "Minimalust", "Jost", system-ui, sans-serif;
  --c67-ui: "Bantayog", "Jost", system-ui, sans-serif;
}

/* ---- 0. Atmosphere: whisper-fine grain ------------------------------ */
.coast67-tide::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 1. Page-load curtain ("the tide drawing back") ----------------- */
.c67-curtain {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; grid-template-rows: repeat(3, 1fr); pointer-events: none;
}
.c67-curtain__panel { transform: translateY(0); will-change: transform; }
.c67-curtain__panel:nth-child(1) { background: #4E4F47; }
.c67-curtain__panel:nth-child(2) { background: #494A43; }
.c67-curtain__panel:nth-child(3) { background: #43443D; }
.c67-curtain__brand {
  position: fixed; inset: 0; z-index: 10001;
  display: grid; place-items: center;
  color: var(--c67-cream);
  font-family: var(--c67-display);
  letter-spacing: .42em; text-transform: uppercase;
  font-size: clamp(1.1rem, 3.4vw, 2rem); font-weight: 500;
  text-indent: .42em; pointer-events: none;
}
.c67-curtain__brand span { display: inline-block; opacity: 0; transform: translateY(115%); }
.c67-curtain.is-out .c67-curtain__panel {
  transform: translateY(-101%); transition: transform 1.05s var(--c67-ease);
}
.c67-curtain.is-out .c67-curtain__panel:nth-child(2) { transition-delay: .07s; }
.c67-curtain.is-out .c67-curtain__panel:nth-child(3) { transition-delay: .14s; }
.c67-curtain.is-out .c67-curtain__brand { opacity: 0; transition: opacity .4s ease .15s; }
.c67-curtain.is-reveal .c67-curtain__brand span {
  opacity: 1; transform: translateY(0);
  transition: opacity .8s var(--c67-ease), transform 1s var(--c67-ease);
}
.c67-curtain.is-reveal .c67-curtain__brand span:nth-child(2) { transition-delay: .07s; }
.c67-curtain.is-reveal .c67-curtain__brand span:nth-child(3) { transition-delay: .14s; }

/* ---- 2. Custom cursor (desktop / fine-pointer only) ----------------- */
.c67-cursor-on { cursor: none; }
.c67-cursor-on a, .c67-cursor-on button, .c67-cursor-on .elementor-button { cursor: none; }
.c67-cursor {
  position: fixed; top: 0; left: 0; z-index: 10005; pointer-events: none;
  will-change: transform; transform: translate(-50%, -50%);
}
.c67-cursor__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c67-orange);
  transition: transform .25s var(--c67-ease), opacity .25s;
}
.c67-cursor__ring {
  position: fixed; top: 0; left: 0; z-index: 10004;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(214, 137, 78, .85);
  pointer-events: none; will-change: transform; transform: translate(-50%, -50%);
  transition: width .3s var(--c67-ease), height .3s var(--c67-ease), background-color .3s, border-color .3s;
  display: grid; place-items: center;
}
.c67-cursor__ring .c67-cursor__label {
  font-family: var(--c67-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c67-cream); opacity: 0; transform: scale(.6);
  transition: opacity .25s, transform .25s var(--c67-ease);
}
body.c67-cursor-hover .c67-cursor__ring {
  width: 78px; height: 78px; background: rgba(78, 79, 71, .92); border-color: transparent;
}
body.c67-cursor-hover .c67-cursor__ring .c67-cursor__label { opacity: 1; transform: scale(1); }
body.c67-cursor-hover .c67-cursor__dot { transform: translate(-50%, -50%) scale(0); }
body.c67-cursor-down .c67-cursor__ring { transform: translate(-50%, -50%) scale(.82); }

/* ---- 3. Hero: parallax content + headline word masks ---------------- */
.coast67-tide .c67-hero { position: relative; overflow: hidden; }
.coast67-tide .c67-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 16%, transparent 42%, rgba(78,79,71,.16) 100%),
    linear-gradient(180deg, rgba(45,46,40,.26) 0%, transparent 28%, rgba(45,46,40,.40) 100%);
}
.coast67-tide .c67-hero > .elementor-container { position: relative; z-index: 2; will-change: transform; }

.c67-word { display: inline-block; overflow: hidden; vertical-align: top; }
.c67-word > i {
  display: inline-block; font-style: inherit; transform: translateY(110%);
  transition: transform 1s var(--c67-ease);
}
.c67-reveal-words.is-in .c67-word > i { transform: translateY(0); }
.c67-reveal-words.is-in .c67-word:nth-child(2) > i { transition-delay: .06s; }
.c67-reveal-words.is-in .c67-word:nth-child(3) > i { transition-delay: .12s; }
.c67-reveal-words.is-in .c67-word:nth-child(4) > i { transition-delay: .18s; }
.c67-reveal-words.is-in .c67-word:nth-child(5) > i { transition-delay: .24s; }
.c67-reveal-words.is-in .c67-word:nth-child(n+6) > i { transition-delay: .30s; }

/* slim horizon scroll-cue (a quiet nod to the brand's horizon line) */
.c67-scrollcue {
  position: absolute; left: 50%; bottom: 28px; z-index: 3; transform: translateX(-50%);
  width: 1px; height: 60px; overflow: hidden; background: rgba(251,243,232,.25);
}
.c67-scrollcue::after {
  content: ""; position: absolute; inset: 0; background: var(--c67-cream);
  animation: c67-cue 2.6s var(--c67-ease-io) infinite;
}
@keyframes c67-cue { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---- 4. Scroll-reveal system ---------------------------------------- */
.coast67-tide .c67-reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--c67-ease), transform 1.1s var(--c67-ease);
  transition-delay: calc(var(--c67-i, 0) * 85ms);
}
.coast67-tide .c67-reveal.is-in { opacity: 1; transform: none; }
.coast67-tide .c67-reveal-img img,
.coast67-tide .c67-reveal-img .elementor-image img {
  clip-path: inset(0 0 100% 0); transform: scale(1.1);
  transition: clip-path 1.2s var(--c67-ease), transform 1.6s var(--c67-ease);
  will-change: clip-path, transform;
}
.coast67-tide .c67-reveal-img.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---- 5. Type + button polish (replaces the marquee) ----------------- */
.coast67-tide .elementor-heading-title { font-family: var(--c67-display); }
.coast67-tide h2.elementor-heading-title { font-weight: 100; }  /* Minimalust Thin per brand request */
.coast67-tide .c67-magnetic { will-change: transform; }
.coast67-tide .elementor-button,
.coast67-tide .c67-btn {
  font-family: var(--c67-ui);
  transition: transform .35s var(--c67-ease), background-color .35s, color .35s, letter-spacing .35s;
}
.coast67-tide .elementor-button:hover { letter-spacing: .04em; }

/* ---- 6. Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .coast67-tide .c67-reveal,
  .coast67-tide .c67-reveal-img img,
  .c67-word > i { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .c67-curtain { display: none !important; }
  .c67-scrollcue::after { animation: none; }
  .c67-cursor, .c67-cursor__ring { display: none !important; }
  .c67-cursor-on, .c67-cursor-on a, .c67-cursor-on button { cursor: auto; }
}
@media (hover: none), (pointer: coarse) {
  .c67-cursor, .c67-cursor__ring { display: none !important; }
  .c67-cursor-on, .c67-cursor-on a, .c67-cursor-on button { cursor: auto; }
}