/* SNC — "Coming Soon" interim page. Standalone stylesheet, not linked to
   style.css. Values taken directly from the Figma frame "Coming Soon - SNC"
   (node 138:336). The full animated SNC build lives in snc-dev.html/
   snc-dev.css and will replace this file once it's ready — see that pair
   for the in-progress work. */

:root {
  --color-text: #fafafa;
  --color-text-soft: #d5d0b0;
  --color-text-muted: rgba(250,250,250,0.6);

  /* same word-mark gradient as style.css's .nav-link:hover / .byline-name:hover
     on the homepage — here it's the resting state, not a hover reveal */
  --gradient-heading: linear-gradient(96deg, #6fae9d 0%, #b9bd6a 38%, #7fb8c2 72%, #a89a6a 100%);
  --gradient-cta: linear-gradient(104deg, #f0e6ca 4%, #998d4f 104%);

  --color-glass-bg: rgba(197,189,189,0.35);
  --color-glass-border: rgba(0,0,0,0.13);
  --color-placeholder: #d9d9d9;

  --font-display: "Instrument Serif", serif;
  --font-ui: "Inria Sans", sans-serif;

  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --margin-x: 180px;
  --margin-narrow: 90px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { background: #2a2a2a; }
body {
  min-height: 100vh;
  /* same dark radial glow + grain texture as snc-dev.css, for visual
     continuity with the full build this page stands in for */
  background: radial-gradient(ellipse 1400px 900px at 50% -6%, #3c3c3c 0%, #313131 45%, #2a2a2a 100%) fixed;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
}

/* — paper grain, same technique/asset as snc-dev.css and the homepage — */
@keyframes sncGrainDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.5; }
  33%  { transform: translate3d(-16px, 9px, 0) scale(1.08); opacity: 0.32; }
  66%  { transform: translate3d(11px, -7px, 0) scale(1.06); opacity: 0.46; }
  100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.5; }
}
@keyframes sncGrainDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1.09); opacity: 0.3; }
  40%  { transform: translate3d(14px, -11px, 0) scale(1.05); opacity: 0.5; }
  75%  { transform: translate3d(-9px, 8px, 0) scale(1.07); opacity: 0.36; }
  100% { transform: translate3d(0, 0, 0) scale(1.09); opacity: 0.3; }
}
#snc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: overlay; }
.snc-grain-layer { position: absolute; inset: -90px; background-image: url("images/grain-texture.png"); background-repeat: repeat; }
.snc-grain-layer--a { background-size: 256px 256px; animation: sncGrainDriftA 34s ease-in-out infinite; }
.snc-grain-layer--b { background-size: 172px 172px; animation: sncGrainDriftB 47s ease-in-out infinite; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--color-text);
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: color-mix(in srgb, #998d4f 30%, transparent); }
*:focus-visible { outline: 2px solid #998d4f; outline-offset: 3px; }

.snc-page { overflow-x: hidden; }
.snc-shell {
  width: 100%; max-width: 1600px; margin: 0 auto;
  padding: 0 var(--margin-x);
}
.snc-shell--narrow { padding: 0 var(--margin-narrow); }

/* — above-the-fold wrapper: header + title + hero + CTA all fit one screen
     on desktop, no scrolling required to see them — only the footer sits
     below and needs a scroll. The logo is just a small floating mark, not a
     layout-affecting header bar — it's taken out of flow (absolute) so the
     {title, hero, CTA} group centers against the true top of the viewport,
     not against "below the header". — */
.snc-above-fold {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
.snc-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}

/* — header: just the home mark, nothing else on this interim page — */
/* matches style.css's .site-header (14px padding) / .site-header-home img
   (26px) used on the rest of the site — same size and inset, just a white
   recolor of the same mark since this page's background is dark, not the
   light `#fbfbfb` the original glow version was designed against */
.snc-header-inner { display: flex; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.snc-home-link { display: block; margin-top: 20px; transition: transform 400ms cubic-bezier(0.22,0.61,0.36,1); }
.snc-home-link img { display: block; height: 39px; width: auto; }
.snc-home-link:hover { transform: scale(1.06); }
.snc-home-link:active { transform: scale(0.95); }

/* — "Coming Soon" title block — */
.snc-coming-soon { text-align: center; padding-top: clamp(8px, 2vh, 20px); padding-bottom: clamp(32px, 6vh, 64px); }
.snc-coming-soon h1 {
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(40px, 6vw, 80px);
  background-image: var(--gradient-heading);
  background-size: 300% 100%;
  filter: saturate(1.35) brightness(1.08);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 2px rgba(0,0,0,0.12);
  margin-bottom: var(--space-3);
  /* continuous, uninteracted flow through the gradient — always on, not a
     hover reveal like the homepage's nav-link/byline treatment */
  animation: sncHeadingDrift 5s ease-in-out infinite;
}
@keyframes sncHeadingDrift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.snc-coming-soon-notify {
  display: inline-block; font-size: 22px; color: var(--color-text-soft);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease;
}
.snc-coming-soon-notify:hover { border-bottom-color: currentColor; }

/* — hero: sticky-note copy + real photos — */
.snc-hero-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  flex-wrap: wrap;
}
.snc-hero-copy { flex: 1 1 400px; max-width: 496px; display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18.4px); }
.snc-hero-copy h2 { font-size: clamp(32px, 4.6vh, 48px); }
.snc-hero-copy p { font-size: clamp(15px, 2vh, 20px); }

.snc-hero-photos {
  /* no overflow:hidden — the opacity fade is what hides each item, so
     nothing ever needs to be hard-clipped by a container edge */
  position: relative; flex: 0 0 auto;
  width: clamp(520px, 60vh, 680px); aspect-ratio: 680 / 280;
  margin-left: -300px;
}

/* — a simple 3-up round-robin carousel, one item on screen at a time:
     sticky-2 slides left→right and out, then sticky-1 slides left→right and
     out, then the ghost (facing the other way) slides right→left and out —
     then it loops. `left` (not transform) drives the slide so each image's
     own static rotate/flip can stay independent of the motion. Fades happen
     well inside the visible area (not at the container's clipped edge), so
     items dissolve in/out rather than getting cut off. — */
.snc-hero-photo--a, .snc-hero-photo--b, .snc-hero-ghost {
  position: absolute; top: 9%; height: 82%; width: auto; max-width: none;
}
.snc-hero-photo--a, .snc-hero-photo--b {
  mix-blend-mode: luminosity;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
}
/* image slots swapped: sticky-2 now plays first, sticky-1 second */
.snc-hero-photo--a { transform: rotate(9deg); animation: sncCarouselImg2 12s ease-in-out infinite; }
.snc-hero-photo--b { transform: rotate(-6deg); animation: sncCarouselImg1 12s ease-in-out infinite; }
/* mirrored to face left (travels right-to-left), and 50% shorter than the
   sticky photos */
.snc-hero-ghost { height: 41%; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35)); animation: sncCarouselGhost 12s ease-in-out infinite; }

/* fades complete with margin to spare before the item's edge would reach the
   container's clip line (92%/-5%, not 100%/0%) — so it dissolves rather than
   getting sliced by the overflow:hidden boundary. Long, gradual ramps (10%
   of the phase each way) instead of a quick 8% blip. */
@keyframes sncCarouselImg1 {
  0% { opacity: 0; left: -5%; }
  10% { opacity: 1; left: 22%; }
  23% { opacity: 1; left: 62%; }
  33%, 100% { opacity: 0; left: 92%; }
}
@keyframes sncCarouselImg2 {
  0%, 33% { opacity: 0; left: -5%; }
  43% { opacity: 1; left: 22%; }
  56% { opacity: 1; left: 62%; }
  66%, 100% { opacity: 0; left: 92%; }
}
/* right-to-left with a sinusoidal bob (translateY zigzag) layered on top of
   the static horizontal flip — a wave, not a straight line */
@keyframes sncCarouselGhost {
  0%, 66% { opacity: 0; left: 92%; transform: scaleX(-1) translateY(0); }
  70% { opacity: 0.6; left: 82%; transform: scaleX(-1) translateY(-10px); }
  76% { opacity: 1; left: 65%; transform: scaleX(-1) translateY(8px); }
  82% { opacity: 1; left: 48%; transform: scaleX(-1) translateY(-10px); }
  88% { opacity: 1; left: 30%; transform: scaleX(-1) translateY(8px); }
  94% { opacity: 0.4; left: 12%; transform: scaleX(-1) translateY(-6px); }
  100% { opacity: 0; left: -5%; transform: scaleX(-1) translateY(0); }
}

/* — CTA — */
.snc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px;
  color: #1a1a1a;
  background: var(--gradient-cta);
  border: none; border-radius: 20px;
  padding: 16px 34px;
  cursor: pointer; white-space: nowrap;
  transition: transform 300ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 300ms ease;
}
.snc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
/* same --margin-x shell as the title/hero blocks above it, not a different
   (narrower) inset — keeps all three blocks sharing one true center line.
   Top padding doubled per the "2x the button's top margin" note. */
.snc-cta-row { display: flex; justify-content: center; padding-top: clamp(32px, 6vh, 64px); padding-bottom: clamp(24px, 5vh, 56px); }

/* — footer: simplified — name + inline nav (left), icons (center),
     two-column tool list (right). No section headings, no description. — */
.snc-footer {
  background: #232323;
  border-top: 1px solid rgba(0,0,0,0.13);
  box-shadow: 0 -8px 20px rgba(255,255,255,0.195);
  padding: var(--space-6) 0;
}
.snc-footer-grid {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-6);
}
/* nav sits BELOW the name (not inline beside it) — matches the right
   column's line count so the two sides read the same height */
.snc-footer-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.snc-footer-name { font-family: var(--font-display); font-size: 20px; margin: 0; white-space: nowrap; }
.snc-footer-nav { display: flex; gap: var(--space-4); }
.snc-footer-nav a { font-family: var(--font-ui); font-size: 14px; color: var(--color-text); transition: color 300ms ease; }
.snc-footer-nav a:hover { color: var(--color-text-muted); }

.snc-footer-icons { display: flex; align-items: center; gap: var(--space-3); }
.snc-footer-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
  transition: transform 300ms ease;
}
.snc-footer-icon:hover { transform: translateY(-2px); }

.snc-footer-tools { display: flex; gap: var(--space-8); }
.snc-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.snc-footer-list a { font-family: var(--font-ui); font-size: 14px; color: var(--color-text); transition: color 300ms ease; }
.snc-footer-list a:hover { color: var(--color-text-muted); }

@media (max-width: 1100px) {
  :root { --margin-x: 80px; --margin-narrow: 50px; }
}
@media (max-width: 720px) {
  :root { --margin-x: 24px; --margin-narrow: 20px; }
  .snc-hero-row { flex-direction: column; align-items: flex-start; }
  .snc-hero-photos { width: 100%; max-width: 300px; margin: 0 auto; }
  .snc-cta-row { padding-left: 24px; padding-right: 24px; }
  .snc-btn { width: 100%; }
  .snc-footer-grid { flex-direction: column; align-items: flex-start; }
  .snc-footer-main { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .snc-footer-tools { gap: var(--space-6); }
}