/* ============================================================
   STELLAN — "Cinematic" add-on
   ITSUMO-inspired: announcement bar, clean retail nav over a
   full-screen hero with a coastal/vintage grade. Loads AFTER
   option-a/styles.css + editorial-white.css; the whole page body
   below the hero stays the Coastal Editorial editorial/SEO build.
   ============================================================ */

/* ---------- Announcement ---------- */
.announce {
  background: #16181a; color: rgba(255,255,255,0.86); text-align: center;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.6rem 1rem; position: relative; z-index: 40;
}
.announce .x { opacity: 0.5; margin: 0 0.7rem; }

/* ---------- Nav over the hero (ITSUMO-style) ---------- */
.cnav {
  position: absolute; top: 2.3rem; left: 0; right: 0; z-index: 35;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--edge, 2rem); color: #fff;
  transition: background .5s, color .5s, padding .5s, box-shadow .5s;
}
.cnav.is-stuck {
  position: fixed; top: 0;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
  color: var(--ink); padding-top: 1rem; padding-bottom: 1rem;
  box-shadow: 0 1px 0 var(--line);
}
.cnav .brand { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.5em; padding-left: 0.5em; color: inherit; }
.cnav .nav-links { display: flex; gap: clamp(1.1rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.cnav .nav-links a { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: inherit; opacity: 0.92; }
.cnav .nav-links a:hover { opacity: 1; }
.cnav-right { display: flex; gap: 1.3rem; align-items: center; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cnav-right a { color: inherit; }
.cnav-right .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.cnav .nav-toggle { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; cursor: pointer; z-index: 60; }
.cnav .nav-toggle span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s, opacity .3s; }
.cnav .nav-toggle span:nth-child(1){top:2px}.cnav .nav-toggle span:nth-child(2){top:10px}.cnav .nav-toggle span:nth-child(3){top:18px}

@media (max-width: 900px) {
  .cnav .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw,360px); flex-direction: column;
    justify-content: center; gap: 1.6rem; background: var(--paper); color: var(--ink);
    padding: var(--edge,2rem); transform: translateX(100%); transition: transform .5s cubic-bezier(.2,.7,.2,1); box-shadow: -1px 0 0 var(--line);
  }
  .cnav .nav-links.open { transform: none; }
  .cnav .nav-links a { font-size: 1.1rem; color: var(--ink); }
  .cnav-right { display: none; }
  .cnav .nav-toggle { display: block; }
  body.menu-open .cnav .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .cnav .nav-toggle span:nth-child(2){opacity:0}
  body.menu-open .cnav .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---------- Cinematic hero ---------- */
.cine { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #15140f; }
.cine-media { position: absolute; inset: 0; z-index: 1; }
.cine-media img, .cine-media video { width: 100%; height: 100%; object-fit: cover; }
/* COASTAL / VINTAGE GRADE — reusable on any footage (img now, <video> later) */
.cine-media .grade {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.20) saturate(0.82) contrast(1.06) brightness(0.92);
  animation: kenburns 28s ease-in-out infinite alternate; transform-origin: 58% 42%;
}
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.12); } }
.cine-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; mix-blend-mode: multiply;
  background:
    linear-gradient(180deg, rgba(28,24,16,0.46) 0%, rgba(28,24,16,0.12) 28%, rgba(20,18,14,0.30) 68%, rgba(16,14,10,0.64) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 50%, rgba(10,9,6,0.55) 100%);
}
.cine-media .wash { position: absolute; inset: 0; z-index: 2; background: rgba(120,86,40,0.10); mix-blend-mode: soft-light; }
.cine-grain {
  position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.7s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(4%,-6%)}75%{transform:translate(-4%,-4%)}100%{transform:translate(6%,6%)} }

.cine-copy { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 5rem var(--edge,2rem) 0; }
.cine-copy .eyebrow { font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 1.5rem; }
.cine-copy h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -0.005em; margin: 0; max-width: 18ch; text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
.cine-copy h1 em { font-style: italic; }
.cine-copy .sub { margin-top: 1.5rem; max-width: 40rem; color: rgba(255,255,255,0.9); font-size: 1.05rem; text-shadow: 0 1px 16px rgba(0,0,0,0.45); }
.cine-cta { margin-top: 2.2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.cine-cta .btn { background: rgba(255,255,255,0.96); color: var(--ink); border-color: #fff; }
.cine-cta .btn:hover { background: transparent; color: #fff; }
.cine-cta .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.65); }
.cine-cta .btn--ghost:hover { background: #fff; color: var(--ink); }
.cine-cue { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(255,255,255,0.75); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; }
.cine-cue::after { content: ""; display: block; width: 1px; height: 32px; background: rgba(255,255,255,0.5); margin: 0.7rem auto 0; animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100%{transform:scaleY(0.35);opacity:0.4}50%{transform:scaleY(1);opacity:1} }

@media (prefers-reduced-motion: reduce) {
  .cine-media .grade { animation: none; }
  .cine-grain { animation: none; }
  .cine-cue::after { animation: none; }
}