/* 画镜AI — 方案1 电影叙事 */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{
  background:#0A0A0F;color:#E8E0D4;
  font-family:'Noto Sans SC','PingFang SC',sans-serif;
  line-height:1.7;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;color:inherit;font:inherit}

/* ---------- Noise Texture ---------- */
.hero__noise{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px;
}

/* ---------- Dot Nav ---------- */
.dot-nav{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);
  z-index:100;display:flex;flex-direction:column;gap:16px;
}
.dot-nav__dot{
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(212,165,116,.4);
  transition:all .3s ease;
}
.dot-nav__dot.is-active{
  background:#D4A574;border-color:#D4A574;
  box-shadow:0 0 8px rgba(212,165,116,.5);
}
.dot-nav__dot:hover{border-color:#D4A574}

/* ---------- 1. Hero ---------- */
.hero{
  position:relative;height:100vh;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
}
.hero__visual{position:absolute;inset:0}
.hero__img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.35) saturate(.8);
  transform:scale(1.05);transition:transform 8s ease-out;
}
body.is-ready .hero__img{transform:scale(1)}
.hero__gradient{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,15,.3) 0%,rgba(10,10,15,.85) 80%,#0A0A0F 100%);
}
.hero__content{
  position:relative;z-index:2;text-align:center;
  max-width:800px;padding:0 24px;
  opacity:0;transform:translateY(30px);
  transition:opacity 1s ease .3s,transform 1s ease .3s;
}
body.is-ready .hero__content{opacity:1;transform:translateY(0)}
.hero__logo{width:64px;height:64px;margin:0 auto 24px;border-radius:16px}
.hero__title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.4rem,6vw,4.5rem);font-weight:900;
  line-height:1.15;letter-spacing:-.02em;
  color:#F5F0E8;margin-bottom:16px;
}
.hero__sub{
  font-size:clamp(1rem,2vw,1.25rem);color:rgba(232,224,212,.6);
  font-weight:300;max-width:560px;margin:0 auto;
}
.hero__scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(212,165,116,.5);font-size:.75rem;letter-spacing:.1em;
  animation:float-hint 2s ease-in-out infinite;
}
@keyframes float-hint{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ---------- 2. Numbers ---------- */
.numbers{
  min-height:60vh;display:flex;align-items:center;justify-content:center;
  padding:80px 24px;
}
.numbers__inner{
  display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center;
}
.numbers__item{text-align:center}
.numbers__value{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:clamp(4rem,10vw,8rem);font-weight:900;
  color:#D4A574;line-height:1;
}
.numbers__unit{
  display:block;font-size:1.1rem;color:rgba(232,224,212,.5);
  margin-top:8px;letter-spacing:.05em;
}
.numbers__divider{
  width:1px;height:80px;background:linear-gradient(to bottom,transparent,rgba(212,165,116,.3),transparent);
}

/* ---------- 3. Cinema (Horizontal Scroll) ---------- */
.cinema{padding:80px 0}
.cinema__heading{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,3rem);font-weight:700;
  text-align:center;margin-bottom:48px;color:#F5F0E8;
}
.cinema__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;gap:0;
}
.cinema__track::-webkit-scrollbar{display:none}
.cinema__frame{
  flex:0 0 100vw;width:100vw;scroll-snap-align:start;
  display:grid;grid-template-columns:1fr 1fr;
  min-height:70vh;align-items:center;
  padding:0 clamp(24px,6vw,120px);gap:48px;
}
.cinema__visual{
  aspect-ratio:16/10;overflow:hidden;border-radius:12px;
  border:1px solid rgba(212,165,116,.15);
}
.cinema__visual img{width:100%;height:100%;object-fit:cover}
.cinema__info{display:flex;flex-direction:column;gap:12px}
.cinema__label{
  font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
  color:#D4A574;font-weight:500;
}
.cinema__info h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:#F5F0E8;
}
.cinema__tagline{
  font-size:1.1rem;color:rgba(212,165,116,.8);font-style:italic;
}
.cinema__info p{color:rgba(232,224,212,.6);font-size:.95rem}
.cinema__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.cinema__chips span{
  padding:4px 14px;border-radius:20px;font-size:.8rem;
  border:1px solid rgba(212,165,116,.25);color:rgba(212,165,116,.7);
}
.cinema__details{display:flex;gap:12px;margin-top:12px}
.cinema__details img{
  width:calc(50% - 6px);border-radius:8px;
  border:1px solid rgba(212,165,116,.1);
}

/* ---------- 4. Timeline ---------- */
.timeline{padding:100px 24px}
.timeline__heading{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,3rem);font-weight:700;
  text-align:center;margin-bottom:64px;color:#F5F0E8;
}
.timeline__track{
  position:relative;max-width:1000px;margin:0 auto;
}
.timeline__line{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(212,165,116,.3) 10%,rgba(212,165,116,.3) 90%,transparent);
  transform:translateX(-50%);
}
.timeline__step{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center;margin-bottom:80px;position:relative;
}
.timeline__step::before{
  content:'';position:absolute;left:50%;top:50%;
  width:12px;height:12px;border-radius:50%;
  background:#D4A574;transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(212,165,116,.5);z-index:2;
}
.timeline__content{padding:0 32px}
.timeline__num{
  font-family:'Playfair Display',serif;
  font-size:3rem;font-weight:900;color:rgba(212,165,116,.2);
  line-height:1;display:block;margin-bottom:8px;
}
.timeline__content h3{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;font-weight:700;color:#F5F0E8;margin-bottom:8px;
}
.timeline__content p{color:rgba(232,224,212,.6);font-size:.95rem}
.timeline__img{
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(212,165,116,.12);
}
.timeline__img img{width:100%;display:block}
.timeline__step--left .timeline__content{text-align:right}
.timeline__step--right{direction:ltr}

/* ---------- 5. CTA ---------- */
.cta{
  min-height:80vh;display:flex;align-items:center;justify-content:center;
  padding:80px 24px;text-align:center;
}
.cta__inner{max-width:600px}
.cta h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.5rem);font-weight:900;
  color:#F5F0E8;margin-bottom:16px;
}
.cta p{color:rgba(232,224,212,.5);font-size:1.1rem;margin-bottom:40px}
.cta__btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:18px 56px;border-radius:60px;font-size:1.1rem;font-weight:600;
  color:#0A0A0F;background:linear-gradient(135deg,#D4A574,#8B7355);
  overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;
}
.cta__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 40px rgba(212,165,116,.35);
}
.cta__btn-glow{
  position:absolute;inset:-2px;border-radius:inherit;
  background:conic-gradient(from 0deg,transparent,rgba(212,165,116,.6),transparent,transparent);
  animation:glow-spin 3s linear infinite;z-index:0;
}
.cta__btn-text{position:relative;z-index:1}
@keyframes glow-spin{to{transform:rotate(360deg)}}
.cta__hint{
  display:block;margin-top:16px;font-size:.8rem;
  color:rgba(232,224,212,.3);
}

/* ---------- Footer ---------- */
.footer{
  padding:32px 24px;border-top:1px solid rgba(212,165,116,.08);
}
.footer__inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
  font-size:.85rem;color:rgba(232,224,212,.35);
}
.footer__logo{width:24px;height:24px;border-radius:6px}
.footer__sep{
  width:1px;height:14px;background:rgba(232,224,212,.15);
}

/* ---------- Reveal Animations ---------- */
.reveal-up,.reveal-left,.reveal-right{
  opacity:0;transition:opacity .8s ease,transform .8s ease;
  transition-delay:var(--delay,0s);
}
.reveal-up{transform:translateY(40px)}
.reveal-left{transform:translateX(-40px)}
.reveal-right{transform:translateX(40px)}
.reveal-up.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{
  opacity:1;transform:translate(0);
}

/* ---------- Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal-up,.reveal-left,.reveal-right{opacity:1;transform:none}
  .hero__content{opacity:1;transform:none}
  .hero__img{transform:scale(1)}
}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .dot-nav{right:12px;gap:12px}
  .dot-nav__dot{width:8px;height:8px}
  .numbers__inner{flex-direction:column;gap:32px}
  .numbers__divider{width:60px;height:1px}
  .cinema__frame{
    grid-template-columns:1fr;padding:0 20px;gap:24px;
    min-height:auto;padding-top:24px;padding-bottom:24px;
  }
  .cinema__visual{aspect-ratio:16/9}
  .timeline__line{left:20px}
  .timeline__step{grid-template-columns:1fr;gap:20px;padding-left:48px}
  .timeline__step::before{left:20px}
  .timeline__step--left .timeline__content{text-align:left}
  .timeline__step--left,.timeline__step--right{direction:ltr}
  .timeline__img{order:2}
  .timeline__content{order:1;padding:0}
}