/* ===================================================================
   WE WERE NEVER ALONE — artifact museum landing page
   A different grammar from the rest of the site on purpose:
   no cards, no grids, no captions. Nine objects, held in silence —
   and a storm that occasionally proves something else is in the room.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;0,6..96,900;1,6..96,500&display=swap');

.wwna-page{
  background:#050403;
  color:#8a7a72;
  scroll-snap-type:y proximity;
}

.wwna-page section{
  border-bottom:none;
}

.wwna-page .site-nav{
  position:fixed;
  background:linear-gradient(to bottom, rgba(3,2,2,0.75), transparent);
  border-bottom:none;
  backdrop-filter:none;
  z-index:6;
}
.wwna-page .site-nav .brand,
.wwna-page .site-nav .links a{ color:#7a6b63; }
.wwna-page .site-nav .links a.active,
.wwna-page .site-nav .links a:hover{ color:#a68f84; }

/* everything the storm dims/brightens lives inside this wrapper,
   so lightning affects the whole scene, not just an overlay skin */
.wwna-stage{
  position:relative;
  filter:brightness(1);
}

/* film-grain, sits above the black, under the content */
.wwna-grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.05;
  mix-blend-mode:overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transition:opacity 1.8s ease;
}

/* lightning: real flash overlay + brightness kick — same proven
   mechanism as the I Killed My Husband page's rain/lightning system */
.wwna-light{
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, rgba(235,240,255,0.95), rgba(210,220,245,0.3) 45%, transparent 75%);
  opacity:0;
  transition:opacity .09s ease-out;
}
.wwna-page.lightning-flash{ filter:brightness(1.55) contrast(1.05); }
.wwna-page.lightning-flash .wwna-light{ opacity:1; }
.wwna-page.lightning-flash-strong{ filter:brightness(2.3) contrast(1.1); }
.wwna-page.lightning-flash-strong .wwna-light{ opacity:1; }
.wwna-page{ transition:filter .09s ease-out; }

/* real bolt — full viewport, path is generated fresh in JS on every
   strike so it never repeats the same shape twice */
.wwna-bolt{
  position:fixed;
  inset:0;
  z-index:41;
  width:100vw;
  height:100vh;
  opacity:0;
  overflow:visible;
  pointer-events:none;
}
.wwna-bolt .core{
  fill:none;
  stroke:#f4f2ff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wwna-bolt .glow{
  fill:none;
  stroke:#cdd8ff;
  stroke-width:9;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.55;
  filter:blur(5px);
}
.wwna-bolt .branch{
  fill:none;
  stroke:#e9edff;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.75;
}

/* ---------- hero ---------- */
.wwna-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 24px;
  overflow:hidden;
  scroll-snap-align:center;
}
.wwna-hero::before{
  content:"";
  position:absolute; inset:-10%;
  background:radial-gradient(ellipse at 50% 45%, rgba(40,12,10,0.4), rgba(0,0,0,0) 58%);
  animation:wwna-breathe 9s ease-in-out infinite;
}
@keyframes wwna-breathe{
  0%, 100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.045); }
}
.wwna-hero h1{
  position:relative;
  font-family:'Bodoni Moda', 'EB Garamond', serif;
  font-weight:900;
  font-style:italic;
  font-optical-sizing:auto;
  font-size:clamp(2.6rem, 8.5vw, 7.2rem);
  line-height:1.04;
  letter-spacing:.01em;
  margin:0;
  color:#6a1010;
  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 40px rgba(90,11,11,.25);
  filter:url(#wwna-rough);
  animation:wwna-arrive 2.6s steps(1, end) 1;
}
@keyframes wwna-arrive{
  0%{ opacity:0; }
  4%{ opacity:.5; }
  7%{ opacity:.08; }
  12%{ opacity:.7; }
  16%{ opacity:.15; }
  22%{ opacity:1; }
  55%{ opacity:1; }
  58%{ opacity:.6; }
  62%{ opacity:1; }
  100%{ opacity:1; }
}

/* ---------- artifact stage ---------- */
.wwna-artifact{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  scroll-snap-align:center;
}
.wwna-artifact figure{
  position:relative;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.4s cubic-bezier(.2,.6,.2,1), transform 1.4s cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.wwna-artifact.is-visible figure{
  opacity:1;
  transform:translateY(0);
}
.wwna-artifact img{
  display:block;
  height:74vh;
  max-height:820px;
  width:auto;
  max-width:86vw;
  object-fit:contain;
  filter:
    drop-shadow(0 34px 70px rgba(0,0,0,.75))
    saturate(.94)
    contrast(1.03);
}

/* ---------- story titles: a whispered afterthought, not a caption ----------
   Hidden by default. Fades to a faint presence shortly after the object
   settles, and clarifies on hover or tap. Placement borrows the same
   left/right/loom/quiet attributes already used for the object's own
   rhythm, so each title lands centered in whatever blank space that
   object already has, rather than a fixed caption position for every one. */
.wwna-title{
  position:absolute;
  opacity:0;
  margin:0;
  white-space:nowrap;
  font-family:'Bodoni Moda', serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(2rem, 4vw, 4.2rem);
  letter-spacing:.05em;
  color:#9c1c1c;
  text-shadow:0 0 34px rgba(120,15,15,.35);
  transition:opacity 1.1s ease;
  pointer-events:none;
}
.wwna-artifact.title-in .wwna-title{ opacity:.72; }
.wwna-artifact.title-hover .wwna-title{ opacity:1; transition:opacity .35s ease; }

/* default (no align/scale attribute): sits quietly below the object */
.wwna-title{ top:100%; left:50%; transform:translateX(-50%); margin-top:3.2rem; text-align:center; }

.wwna-artifact[data-align="left"] .wwna-title{
  top:50%; bottom:auto; left:100%; transform:translateY(-50%);
  margin-top:0; margin-left:5vw; text-align:left;
}
.wwna-artifact[data-align="right"] .wwna-title{
  top:50%; bottom:auto; left:auto; right:100%; transform:translateY(-50%);
  margin-top:0; margin-right:5vw; text-align:right;
}
.wwna-artifact[data-scale="quiet"] .wwna-title{ margin-top:4.5rem; }
.wwna-artifact[data-scale="loom"] .wwna-title{ margin-top:2.8rem; }
.wwna-artifact[data-wide="1"] .wwna-title{ margin-top:3.4rem; }

@media (max-width:900px){
  .wwna-artifact[data-align="left"] .wwna-title,
  .wwna-artifact[data-align="right"] .wwna-title{
    top:100%; bottom:auto; left:50%; right:auto;
    transform:translateX(-50%);
    margin:2.2rem 0 0; text-align:center;
  }
  .wwna-title{ font-size:clamp(1.3rem, 5vw, 2.1rem); white-space:normal; }
}

/* rhythm variation across the nine — a couple sit smaller and more
   alone in the frame, a couple loom larger; unevenness is what
   makes the pattern feel wrong */
.wwna-artifact[data-scale="quiet"]{ padding-top:14vh; padding-bottom:14vh; }
.wwna-artifact[data-scale="quiet"] img{ height:52vh; }

.wwna-artifact[data-scale="loom"] img{ height:86vh; max-height:960px; }

.wwna-artifact[data-align="left"]{ justify-content:flex-start; padding-left:10vw; }
.wwna-artifact[data-align="right"]{ justify-content:flex-end; padding-right:10vw; }

.wwna-artifact[data-wide="1"] img{ height:auto; width:min(64vw, 900px); max-height:66vh; }

/* ---------- closing section ---------- */
.wwna-final{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
  padding:0 24px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.4s cubic-bezier(.2,.6,.2,1), transform 1.4s cubic-bezier(.2,.6,.2,1);
  scroll-snap-align:center;
}
.wwna-final.is-visible{ opacity:1; transform:translateY(0); }
.wwna-final .coming-soon{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:.5em;
  color:#701515;
  text-transform:uppercase;
}
.wwna-final .collection-name{
  font-family:'Bodoni Moda', serif;
  font-style:italic;
  font-weight:800;
  font-size:clamp(1.5rem, 3.4vw, 2.3rem);
  color:#6a1010;
  letter-spacing:.02em;
  text-shadow:0 0 30px rgba(90,11,11,.22);
}

@media (max-width:640px){
  .wwna-artifact{ padding:6vh 8vw; }
  .wwna-artifact img{ height:56vh; }
  .wwna-artifact[data-scale="loom"] img{ height:64vh; }
  .wwna-artifact[data-scale="quiet"] img{ height:44vh; }
  .wwna-artifact[data-align="left"],
  .wwna-artifact[data-align="right"]{ justify-content:center; padding-left:8vw; padding-right:8vw; }
}

@media (prefers-reduced-motion: reduce){
  .wwna-page{ scroll-snap-type:none; }
  .wwna-hero::before{ animation:none; }
  .wwna-hero h1{ animation:none; opacity:1; }
  .wwna-artifact figure,
  .wwna-final{
    transition:none;
    opacity:1;
    transform:none;
  }
}