/* ============================================================
   HOME — hero / slogan / photos / choose
   ============================================================ */

/* ---------- HERO (white) ---------- */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  background:var(--paper);
}
.hero__bgtext{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  font-size:clamp(120px,21vw,420px); letter-spacing:-.04em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(10,13,12,.08);
  pointer-events:none; user-select:none; z-index:0;
}
.hero__meta{ position:absolute; z-index:4; display:flex; flex-direction:column; gap:6px; font-size:var(--fs-micro); letter-spacing:.26em; }
.hero__meta--tl{ top:clamp(66px,9vh,104px); left:var(--space); }
.hero__meta--tr{ top:clamp(66px,9vh,104px); right:var(--space); text-align:right; }
.hero__stage{
  position:absolute; inset:0; z-index:2;   /* 项链铺满整个 hero */
  width:100%; height:100%; margin:0; touch-action:none;
}
#necklace-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__stage-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-size:var(--fs-micro); letter-spacing:.3em; white-space:nowrap;
  color:var(--muted-ink); animation:hint-breathe 2.6s ease-in-out infinite;
}
@keyframes hint-breathe{ 0%,100%{ opacity:.5;} 50%{ opacity:1;} }
.hero__stage-tag{
  position:absolute; right:2%; top:14%;
  font-size:var(--fs-micro); letter-spacing:.3em; color:var(--green-600);
  writing-mode:vertical-rl; opacity:.7;
}
.hero__intro{ position:absolute; left:var(--space); bottom:calc(var(--space) + 8px); z-index:4; max-width:520px; }
.hero__intro .mono{ font-size:var(--fs-micro); margin-bottom:8px; }
.hero__name{ font-size:clamp(56px,9vw,150px); letter-spacing:-.03em; }
.hero__desc{ margin-top:10px; font-size:var(--fs-lead); color:var(--muted-ink); line-height:1.5; }

@media (max-width:820px){
  .hero__meta--tr{ display:none; }
  .hero__stage{ width:100%; height:100%; }
  .hero__intro{ left:var(--space); right:var(--space); bottom:calc(var(--space) + 4px); }
  .hero__name{ font-size:clamp(52px,16vw,92px); }
}

/* ---------- SLOGAN (black) ---------- */
.slogan{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  background-color:var(--bg);
  /* subtle grid backdrop */
  background-image:
    linear-gradient(rgba(245,246,241,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,246,241,.05) 1px, transparent 1px);
  background-size:52px 52px;
}
.slogan__marquee{
  position:absolute; top:0; left:0; right:0; z-index:2;
  padding:clamp(6px,1vw,10px) 0 clamp(8px,1.2vw,12px); overflow:hidden;
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  background:rgba(5,7,6,.55);
}
.slogan__marquee .marquee__track{
  width:max-content; min-width:max-content;
  --marquee-shift:-50%;
  animation-name:marquee-loop;
  will-change:transform;
}
@keyframes marquee-loop{ to{ transform:translateX(var(--marquee-shift,-50%)); } }
.slogan__center{ text-align:center; padding:0 var(--space); }
.slogan__sub{
  margin-top:26px; font-size:var(--fs-micro); letter-spacing:.4em; color:var(--muted-paper);
}
@media (max-width:600px){ .slogan__line{ font-size:clamp(28px,8vw,52px); white-space:normal; } }

/* The opening stays in normal flow until the scroll animation is ready. */
.opening--animated{ height:245svh; position:relative; background:var(--bg); }
.opening--animated .opening__stage{ position:sticky; top:0; height:100svh; isolation:isolate; overflow:hidden; }
.opening--animated .hero{ height:100%; min-height:0; transform-origin:50% 55%; }
.opening--animated .opening__stage > .hero__stage{ z-index:6; }
.opening--animated .hero > .hero__stage-hint,
.opening--animated .hero > .hero__stage-tag{ z-index:4; }
.opening--animated .slogan{
  position:absolute; inset:0; height:100%; min-height:0; z-index:5;
  clip-path:polygon(50% 55%,50% 55%,50% 55%,50% 55%);
}
@media (max-width:600px){
  .opening--animated{ height:225svh; }
}
@media (prefers-reduced-motion:reduce){
  .opening--animated{ height:auto; }
  .opening--animated .opening__stage{ position:relative; height:auto; overflow:visible; }
  .opening--animated .hero{ min-height:100svh; transform:none !important; opacity:1 !important; }
  .opening--animated .slogan{ position:relative; min-height:100svh; clip-path:none !important; }
}

/* ---------- PHOTOS (black) ---------- */
.photos{
  min-height:100vh; min-height:100svh;
  position:relative; overflow:hidden;
  background-color:var(--bg);
  /* subtle grid backdrop (same as slogan) */
  background-image:
    linear-gradient(rgba(245,246,241,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,246,241,.05) 1px, transparent 1px);
  background-size:52px 52px;
}
.photos::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(80vmin,720px); height:min(80vmin,720px); border-radius:50%;
  background:radial-gradient(circle, rgba(1,132,127,.16), transparent 62%);
  pointer-events:none;
}
.photos__wall{ position:absolute; inset:0; }
/* ImageTrail (React Bits, vanilla port) — CSS 与官方一致 */
.content{
  width:100%; height:100%; position:relative; z-index:100;
  border-radius:8px; background:transparent; overflow:visible;
}
.content__img{
  width:190px; aspect-ratio:1.1; border-radius:15px;
  position:absolute; top:0; left:0; opacity:0; overflow:hidden;
  will-change:transform, filter;
}
.content__img-inner{
  background-position:50% 50%;
  width:calc(100% + 20px); height:calc(100% + 20px);
  background-size:cover; position:absolute;
  top:calc(-1 * 20px / 2); left:calc(-1 * 20px / 2);
}
.photos__hint{
  position:absolute; left:50%; bottom:clamp(70px,12vh,120px); transform:translateX(-50%);
  font-size:var(--fs-micro); letter-spacing:.34em; color:var(--muted-paper); white-space:nowrap; z-index:6;
  animation:hint-breathe 2.6s ease-in-out infinite;
}
.photos__stats{
  position:absolute; left:var(--space); bottom:calc(var(--space) - 16px); z-index:6;
  display:flex; gap:18px; font-size:var(--fs-micro); letter-spacing:.24em; color:var(--muted-paper);
}
@media (max-width:640px){ .photos__stats{ display:none; } }

/* ---------- CHOOSE (white) ---------- */
.choose{ background:var(--paper); position:relative; }
.choose__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,22px);
}
.card{
  position:relative; display:flex; flex-direction:column; gap:16px;
  min-height:470px; padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--paper-2); color:var(--ink); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s, color .4s;
}
.card::before{
  content:''; position:absolute; inset:0; background:var(--green);
  transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease);
}
.card > *{ position:relative; z-index:1; }
.card:hover{ transform:translateY(-10px); color:var(--paper); border-color:var(--green); box-shadow:0 34px 70px rgba(1,132,127,.28); }
.card:hover::before{ transform:scaleY(1); }
.card__num{ font-size:var(--fs-micro); letter-spacing:.3em; color:var(--green); }
.card:hover .card__num{ color:var(--green-200); }
.card__art{ margin-top:6px; }
.card__art svg{ width:100%; height:auto; color:var(--ink); transition:color .4s; }
.card:hover .card__art svg{ color:var(--paper); }
.card__title{ font-size:clamp(38px,3.6vw,60px); letter-spacing:-.02em; margin-top:auto; }
.card__desc{ font-size:var(--fs-small); opacity:.72; line-height:1.6; }
.card__tags{ display:flex; gap:8px; flex-wrap:wrap; }
.card__tags span{ font-size:9px; letter-spacing:.22em; border:1px solid currentColor; border-radius:99px; padding:5px 10px; opacity:.75; }
.card__go{ margin-top:4px; font-size:var(--fs-micro); letter-spacing:.3em; color:var(--green); transition:transform .35s var(--ease); }
.card:hover .card__go{ color:var(--green-100); transform:translateX(8px); }
.choose__note{
  margin-top:clamp(30px,5vh,54px); text-align:center; font-size:var(--fs-small); letter-spacing:.12em;
  color:var(--muted-ink); text-transform:none;
}
.choose__note a{ color:var(--green); text-decoration:underline; text-underline-offset:4px; }
@media (max-width:960px){ .choose__grid{ grid-template-columns:1fr; } .card{ min-height:auto; } }

/* hero stage children must not block drag */
.hero__stage-hint, .hero__stage-tag{ pointer-events:none; }

/* slogan fold (FoldText) */
.slogan__center{ text-align:center; padding:0 var(--space); }
.slogan__fold{ display:flex; align-items:center; justify-content:center; min-height:1.35em; }
.slogan__sub{ margin-top:clamp(28px,4vh,44px); font-size:var(--fs-micro); letter-spacing:.4em; color:var(--muted-paper); }

/* ---------- ASK — inline question box (below choose) ---------- */
.ask-section{
  position:relative; overflow:hidden;
  background:var(--paper); color:var(--ink);
  border-top:1px solid var(--line);
}
.ask-section::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(560px,80%); height:1px;
  background:linear-gradient(90deg, transparent, var(--green-700), transparent);
}
.ask-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px);
  align-items:center; padding:clamp(90px,14vh,170px) var(--space);
}
@media (max-width:900px){ .ask-inner{ grid-template-columns:1fr; } }

.ask-left{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.ask-title{ font-size:clamp(44px,6.4vw,96px); letter-spacing:-.03em; }
.ask-sub{ font-size:var(--fs-lead); color:var(--muted-ink); line-height:1.7; }
.ask-chips{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.chip{
  font-size:var(--fs-small); letter-spacing:.06em; color:var(--green-600);
  border:1px dashed var(--line-strong); border-radius:99px; padding:8px 16px; width:max-content;
  opacity:.9;
}
.ask-btn{ margin-top:12px; font-size:var(--fs-label); }
.ask-note{ font-size:9px; letter-spacing:.24em; color:var(--muted-ink); opacity:.7; }
.ask-contacts{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.ask-contact-links{ display:flex; gap:16px; font-size:var(--fs-micro); letter-spacing:.2em; }
.ask-contact-links a{ color:var(--muted-ink); transition:color .25s; }
.ask-contact-links a:hover{ color:var(--green); }

.ask-right{ display:flex; align-items:center; justify-content:center; }
.ask-scene{ position:relative; width:min(460px,86vw); }
.ask-glow{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(1,132,127,.28), transparent 65%);
  filter:blur(10px); animation:glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06);} }
.ask-box{ position:relative; z-index:1; width:100%; height:auto; }
.ask-q{ animation:q-float 5s ease-in-out infinite; }
.ask-q text{ animation:q-float 6s ease-in-out infinite; }
.ask-q text:nth-child(2){ animation-delay:1.2s; }
.ask-q text:nth-child(3){ animation-delay:2.4s; }
.ask-q text:nth-child(4){ animation-delay:.6s; }
.ask-q text:nth-child(5){ animation-delay:3.2s; }
@keyframes q-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.ask-env{ animation:env-in 3.4s var(--ease-out) infinite; }
@keyframes env-in{ 0%{ transform:translate(-120px,-60px) rotate(-14deg); opacity:0;} 30%{ opacity:1;} 70%{ transform:translate(30px,8px) rotate(6deg); opacity:1;} 100%{ transform:translate(120px,90px) rotate(18deg); opacity:0;} }
.ask-letter{ animation:letter-in 4.6s ease-in-out infinite; }
@keyframes letter-in{ 0%,30%{ transform:translateY(0); opacity:0;} 40%{ opacity:1;} 60%{ transform:translateY(-26px); opacity:1;} 80%,100%{ transform:translateY(-40px); opacity:0;} }
.ask-caption{
  position:relative; z-index:1; margin-top:18px;
  display:flex; justify-content:space-between;
  font-size:var(--fs-micro); letter-spacing:.3em; color:var(--muted-ink);
}