/* Skyline Archive — Now (rebuilt)
   - Background: pure black
   - Calques séparés : Polaroid, Now, Phrase, Papillon
   - Scroll : Polaroid bouge (comme Home), papillon "vole" puis se recompose
   NOTE: ne modifie pas styles.css
*/

.now-page{
  background:#000;
}

.now-main{
  min-height: 100svh;
  padding: 0;
}

/* Dedicated scroll space */
.now-scroll{
  position: relative;
  min-height: 520vh; /* deeper travel: lets the butterfly go down into the black */
  display: block;
}

/* Subtle drifting texture so the background doesn't feel "frozen" while the stage is sticky */
.now-scroll::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(circle at 40% 90%, rgba(255,255,255,0.03), transparent 55%);
  opacity: 0.35;
  mix-blend-mode: overlay;
  transform: translate3d(0, var(--now-bg-drift, 0px), 0);
  transition: transform 80ms linear;
}

/* Sticky stage centered */
.now-sticky{
  position: sticky;
  top: 0;
  height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}

/* --- CALQUE 1: Polaroid --- */
.now-polaroid{
  margin:0;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, var(--pol-y, 0px), 0) scale(var(--pol-s, 1));
}

.now-polaroid-img{
  width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  /* no drop shadow outside (we keep it clean) */
}

/* MARC HENRY inside bottom white band */
.now-artist{
  position: absolute;
  left: 50%;
  /* The Polaroid PNG is transparent outside the paper; place caption inside the bottom white band */
  bottom: 13.2%;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.25vw, 16px);
  color: rgba(35,35,35,.86);
  }

/* --- CALQUE 4: Butterfly --- */
.now-bfly-wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  /*
    Butterfly is a separate layer that must stay centered.
    It follows the same stage motion as the Polaroid (--pol-y / --pol-s)
    plus extra "flight" drift (--fly-x / --fly-y) and micro pointer drift (--mx / --my).
  */
  transform:
    translate3d(
      calc(-50% + var(--fly-x,0px) + var(--mx,0px)),
      calc(-50% + var(--fly-y,0px) + var(--my,0px) + var(--pol-y,0px)),
      0
    )
    scale(var(--pol-s, 1));
  width: min(900px, 94vw);
  height: auto;
  z-index: 5;
  pointer-events:none;
  will-change: transform;
}

.now-butterfly-shadow,
.now-butterfly{
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  transform-origin: center;
}

/* Shadow sits on paper, butterfly sits above and slightly exceeds inner frame */
.now-butterfly-shadow{
  width: 78%;
  transform: translate(-50%, -52%) scale(1.08) translateY(22px);
  opacity: .22;
  filter: blur(22px);
  }

.now-butterfly{
  width: 86%;
  transform: translate(-50%, -52%) scale(1.06);
}

/* --- CALQUE 2: NOW --- */
.now-now-layer{
  position: absolute;
  left: 50%;
  /* lifted: text was drifting too low and becoming almost invisible */
  top: calc(50% + min(250px, 24vw));
  transform: translate3d(-50%, var(--now-text-drift, 0px), 0);
  opacity: var(--now-text-op, 1);
  z-index: 10;
  pointer-events:none;
}

.now-title{
  font-size: 32px;
  font-weight: 500;
  opacity: .95;
  letter-spacing: .02em;
  font-family: "Snell Roundhand","Brush Script MT","Segoe Script","Apple Chancery",cursive;
  position: relative;
  display: inline-block;
}

/* --- CALQUE 3: Phrase --- */
.now-phrase-layer{
  position: absolute;
  left: 50%;
  /* keep the sentence clearly below “Now” */
  top: calc(50% + min(370px, 34vw));
  transform: translate3d(-50%, var(--now-phrase-drift, 0px), 0);
  opacity: var(--now-phrase-op, 1);
  z-index: 9;
  pointer-events:none;
}

.now-sub{
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .78;
  text-align:center;
  white-space: nowrap; /* keep on one line */
}

/* Active menu item: discreet */
#topMenu .menuItem.isActive{ opacity: 1; }

@media (max-width: 430px){
  .now-scroll{ min-height: 360vh; }
  .now-title{ font-size: 28px; }
  /* tighter tracking on small screens so it stays on one line */
  .now-sub{ font-size: 11px; letter-spacing: .22em; }
  /* lifted on mobile as well (text was too low) */
  .now-now-layer{ top: calc(50% + min(185px, 30vw)); }
  .now-phrase-layer{ top: calc(50% + min(225px, 34vw)); }
  .now-artist{ bottom: 13.6%; }
}

/* --- CRT micro-animation on “Now” (Option B) ---
   Triggered by JS adding the .crt-cycle class every ~20s.
*/

.now-title.crt-cycle{
  animation: crtNowCycle 1850ms linear 1 both;
  will-change: opacity, filter, clip-path, transform;
}

.now-title.crt-cycle::before{
  content: "";
  position: absolute;
  inset: -6px -10px;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.045),
      rgba(255,255,255,.045) 1px,
      rgba(255,255,255,0) 3px,
      rgba(255,255,255,0) 6px
    );
    filter: blur(.2px);
  animation: crtScan 1850ms linear 1 both;
}

@keyframes crtScan{
  0%, 28%, 100% { opacity: 0; transform: translateY(0); }
  6% { opacity: .35; }
  12% { opacity: .18; }
  18% { opacity: .28; }
  24% { opacity: .12; transform: translateY(2px); }
  40% { opacity: 0; }
}

@keyframes crtNowCycle{
  0%   { opacity: .95; clip-path: inset(0 0 0 0); filter: none; transform: translateY(0) scale(1); text-shadow: none; }
  6%   { opacity: .58; filter: blur(.4px) contrast(1.25); text-shadow: 0 0 10px rgba(255,255,255,.08); }
  10%  { opacity: 1;   filter: none; }
  14%  { opacity: .72; filter: blur(.25px) contrast(1.15); }
  18%  { opacity: .98; filter: none; text-shadow: 0 0 12px rgba(255,255,255,.06); }
  28%  { opacity: .85; clip-path: inset(0 0 0 0); }
  36%  { opacity: .35; clip-path: inset(22% 30% 22% 30%); filter: blur(.55px) contrast(1.25); }
  43%  { opacity: .18; clip-path: inset(44% 46% 44% 46%); filter: blur(.9px) contrast(1.35); }
  47%  { opacity: .12; clip-path: inset(49% 49% 49% 49%); text-shadow: 0 0 14px rgba(255,255,255,.10); }
  52%  { opacity: 0;   clip-path: inset(50% 50% 50% 50%); text-shadow: none; }
  60%  { opacity: 0;   clip-path: inset(50% 50% 50% 50%); filter: none; }
  68%  { opacity: .22; clip-path: inset(49% 49% 49% 49%); filter: blur(.9px) contrast(1.35); text-shadow: 0 0 14px rgba(255,255,255,.10); }
  74%  { opacity: .62; clip-path: inset(30% 34% 30% 34%); filter: blur(.55px) contrast(1.2); }
  82%  { opacity: 1;   clip-path: inset(0 0 0 0); filter: none; }
  88%  { opacity: .8;  filter: blur(.18px) contrast(1.08); }
  100% { opacity: .95; clip-path: inset(0 0 0 0); filter: none; transform: translateY(0) scale(1); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce){
  .now-title.crt-cycle{ animation: none !important; }
  .now-title.crt-cycle::before{ animation: none !important; opacity: 0 !important; }
}


/* --- Layer isolation (images above, effects below) --- */
.now-scroll{
  position: relative;
  min-height: 520svh;
  background:#000;
}

.now-visual-layer{
  position: fixed;
  left: 50%;
  top: 42svh;
  transform: translate(-50%, -50%) translateY(var(--now-stage-drift, 0px));
  width: min(920px, 94vw);
  z-index: 30;
  pointer-events: none;
  /* isolate from CRT blending below */
  isolation: isolate;
}

.now-text-layer{
  position: fixed;
  left: 50%;
  /* Keep it visible and close to the stage */
  top: 64svh;
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
  width: min(920px, 94vw);
  z-index: 60;
  text-align: center;
  pointer-events: none;
  isolation: isolate;
}

/* IMPORTANT: make inner calques visible and scroll-driven (Home-like)
   We override earlier absolute positioning so the text never gets pushed off-screen. */
.now-now-layer{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: translate3d(0, var(--now-title-drift, 0px), 0) !important;
  opacity: var(--now-title-op, 1) !important;
}

.now-phrase-layer{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: translate3d(0, var(--now-phrase-drift2, 0px), 0) !important;
  opacity: var(--now-phrase-op, 1) !important;
}

.now-phrase-layer{ opacity: var(--now-phrase-op, 1); }

/* Deeper scroll into the black */
.now-spacer{ height: 380svh; }

/* --- NOW teaser additions --- */
.now-track{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
}

.now-sig{
  margin-top: 16px;
  font-family: "Now", "Comic Sans MS", cursive; /* keep the existing handwritten vibe */
  font-size: 22px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

@media (max-width: 600px){
  .now-sig{ font-size: 20px; }
}