/* Page-level layout for the Arizandy Anne portfolio.
   Atoms come from the design-system bundle; this file only carries
   layout, rhythm and the portfolio's slower motion choreography. */

html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [role="dialog"]{overscroll-behavior:contain}
main [id]{scroll-margin-top:88px}
:focus-visible{outline:2px solid var(--text);outline-offset:5px}

.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad)}

/* reveal */
.rise{opacity:0;transform:translateY(32px);transition:opacity 1.15s var(--ease-out-expo),transform 1.35s var(--ease-out-expo)}
.rise.is-in{opacity:1;transform:none}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:6px;background:var(--grad-italic);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}

/* nav */
.site-nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50}
.site-nav--desktop{transition:left .95s var(--ease-out-expo)}
.site-nav--desktop.is-collapsed{left:calc(100% - 51px)}
.site-nav__shell{position:relative;height:54px;border-radius:999px;background:rgba(6,7,12,.72);backdrop-filter:var(--blur-nav);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-nav);transition:width .95s var(--ease-out-expo);overflow:hidden}
.site-nav__inner{width:max-content;opacity:1;transition:opacity .45s ease .22s,transform .75s var(--ease-out-expo) .12s}
.is-collapsed .site-nav__inner{opacity:0;transform:translateX(-20px);transition-delay:0s;pointer-events:none}
.site-nav__burger{position:absolute;inset:0;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;opacity:0;visibility:hidden;transform:scale(.75);transition:opacity .3s ease,transform .65s var(--ease-out-expo),visibility 0s .3s}
.is-collapsed .site-nav__burger{opacity:1;visibility:visible;transform:scale(1);transition-delay:.25s}
.site-nav__toggle{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:rgba(6,7,12,.72);backdrop-filter:var(--blur-nav);border:1px solid var(--hairline);box-shadow:var(--shadow-nav)}
.site-nav__close{align-self:flex-end;display:grid;place-items:center;width:40px;height:40px;border-radius:50%}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(36px,5vw,80px);align-items:center;padding-top:clamp(118px,14vh,150px);padding-bottom:clamp(16px,3vh,40px)}
.hero__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-hero);white-space:nowrap;line-height:1.08;letter-spacing:-.025em;margin-bottom:26px}
.hero__content{min-width:0}
.hero__word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .06em .14em;margin:-.12em -.06em -.14em}
.hero__word{display:inline-block;animation:heroWordIn 1.4s var(--ease-out-expo) both;animation-delay:var(--word-delay)}
@keyframes heroWordIn{from{opacity:0;transform:translateY(110%) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
.hero__media.rise{transform:translateY(38px) scale(.965);transition-duration:1.6s,1.8s}
.hero__media.rise.is-in{transform:none}
.hero__portrait-motion{transform:perspective(1000px) translateY(var(--portrait-y,0px)) rotateX(var(--portrait-rx,0deg)) rotateY(var(--portrait-ry,0deg));transition:transform 1s var(--ease-out-expo)}
.hero__lead{font-size:var(--fs-lead);color:var(--text-dim);max-width:50ch;margin-bottom:34px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero__proof{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:0;margin-top:34px;padding-top:25px;border-top:1px solid var(--hairline);max-width:580px}
.hero__metric{min-width:0;display:flex;flex-direction:column;gap:9px;padding:0 clamp(10px,1.5vw,22px)}
.hero__metric:first-child{padding-left:0}
.hero__metric:last-child{padding-right:0}
.hero__metric + .hero__metric{border-left:1px solid var(--hairline)}
.hero__metric dt{font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.055em;text-transform:uppercase;color:var(--text-dim);max-width:19ch;text-wrap:balance}
.hero__metric dd{order:-1;font-family:var(--font-display);font-size:clamp(1.45rem,2.35vw,2rem);font-weight:650;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}

/* brands */
.brands{padding-top:var(--section-gap-sm)}
.brands__line{text-align:center;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:clamp(24px,3vw,40px)}

/* work */
.work,.process,.cta{padding-top:var(--section-gap)}
.carousel{position:relative}
.carousel::before{content:'';position:absolute;left:50%;top:44%;width:min(980px,90%);aspect-ratio:1.7;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(var(--accent-rgb),.10),rgba(var(--accent-deep-rgb),.05) 45%,transparent 70%);animation:stageBreathe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes stageBreathe{from{opacity:.7;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.deck{overflow:hidden;padding:90px 0 130px;margin:-66px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.deck__track{display:flex;gap:8px;transition:transform .65s cubic-bezier(.22,1,.36,1);will-change:transform}
.deck__slide{flex:none;transition:transform .55s cubic-bezier(.22,1,.36,1);transform:scale(.8)}
.deck__slide.is-active{transform:scale(1)}
.deck__nav{position:absolute;top:calc(50% - 32px);width:44px;height:44px;border-radius:50%;background:rgba(6,7,12,.6);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);color:var(--text-dim);display:grid;place-items:center;z-index:5;transition:color .25s,border-color .25s,box-shadow .25s}
.deck__nav:hover{color:var(--text);border-color:var(--accent-edge);box-shadow:var(--glow-sm)}
.deck__nav--prev{left:0}
.deck__nav--next{right:0}
.deck__dots{display:flex;justify-content:center;gap:8px;margin-top:-34px}
.deck__dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.22);transition:background .3s,width .3s}
.deck__dot.is-on{background:var(--accent);width:22px}

/* meet */
.meet{padding-top:var(--section-gap)}
.meet__grid{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;max-width:960px;margin:0 auto}
.meet__lead{font-size:1.05rem;color:var(--text);margin-bottom:18px;max-width:42ch}
.dotlist{display:grid;gap:12px}
.dotlist li{position:relative;padding-left:22px;color:var(--text-dim);line-height:1.55}
.dotlist li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.5)}

/* stats */
.stats{padding-top:clamp(70px,9vw,120px)}
.stats__kicker{font-size:var(--fs-kicker);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);text-align:center;margin-bottom:clamp(18px,2.5vw,28px)}
.stats__row{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}

/* positioning */
.positioning{position:relative;padding-top:var(--section-gap)}
.positioning::before{content:'';position:absolute;top:40px;left:50%;transform:translateX(-50%);width:min(560px,70%);aspect-ratio:1.4;border-radius:50%;background:rgba(var(--accent-rgb),.05);filter:blur(140px);pointer-events:none;z-index:-1}
.positioning__sub{text-align:center;color:var(--text-dim);max-width:52ch;margin:calc(-1 * clamp(24px,3.5vw,48px)) auto clamp(26px,3vw,40px)}
.pos__grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:var(--grid-gap)}
.pos__grid > .rise{display:flex;min-width:0}
.pos__grid > .rise > [role="button"]{display:flex;flex-direction:column;width:100%}
.pos__grid > .rise > [role="button"] > p{flex:1}

/* process */
.process__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.5vw,18px)}
.process__steps > li + li::before{content:'';position:absolute;top:calc(clamp(24px,3vw,34px) + 23px);left:calc(-50% + 34px);right:calc(50% + 34px);height:1.5px;background:var(--hairline);transition:background .4s ease}
.process__steps > li.lit::before{background:var(--accent-edge)}

/* cta */
.cta{text-align:center}
.cta__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-cta);line-height:1.1;letter-spacing:-.025em;max-width:20ch;margin:0 auto 14px}
.cta__panel{position:relative;max-width:680px;margin:0 auto;background:rgba(255,255,255,.035);backdrop-filter:blur(20px);border:1px solid var(--accent-line);border-radius:var(--radius-panel);padding:clamp(32px,4.5vw,52px);box-shadow:var(--glow-lg);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;animation:glowBreathe 8.5s ease-in-out infinite alternate}
.cta__panel:hover{transform:scale(1.02)}
.cta__choices{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.cta__note{margin-top:16px;font-size:.875rem;color:var(--text-faint)}
@keyframes glowBreathe{from{box-shadow:0 0 34px rgba(var(--accent-rgb),.12),0 24px 60px rgba(0,0,0,.4)}to{box-shadow:0 0 72px rgba(var(--accent-rgb),.30),0 24px 60px rgba(0,0,0,.4)}}
.glow-breathe{animation:glowBreathe 7s ease-in-out infinite alternate}

/* footer */
.footer{margin-top:clamp(72px,9vw,140px);border-top:1px solid var(--hairline);padding:36px var(--container-pad) 44px;text-align:center}
.footer__lockup{font-size:.8125rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px}
.footer__fine{font-size:.8125rem;color:var(--text-faint)}
.footer__fine a{color:var(--text-dim)}
.footer__fine a:hover{color:var(--accent)}
.social{display:flex;justify-content:center;gap:14px;margin:4px 0 18px}

/* sticky mobile cta */
.mobile-cta{display:none}

@media (max-width:1020px){.nav-links-wide{display:none}}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:110px}
  .hero__media{order:-1;max-width:400px;margin:0 auto}
  .pos__grid{grid-template-columns:1fr 1fr}
  .meet__grid{grid-template-columns:minmax(220px,280px) 1fr}
}

@media (max-width:760px){
  .stats__row{grid-template-columns:1fr 1fr}
  .stats__row > *:last-child{grid-column:1 / -1}
  .pos__grid{grid-template-columns:1fr}
  .process__steps{grid-template-columns:1fr}
  .process__steps > li + li::before{display:none}
}

@media (max-width:640px){
  .work,.process,.cta{padding-top:72px}
  .positioning,.meet{padding-top:72px}
  .stats{padding-top:56px}
  .brands{padding-top:52px}
  .hero{padding-top:92px;gap:26px}
  .hero__media{max-width:none}
  .hero__title{white-space:normal;font-size:clamp(1.7rem,7.8vw,2.1rem);margin-bottom:12px}
  .hero__lead{font-size:.9688rem;margin-bottom:18px}
  .hero__actions{gap:10px}
  .hero__proof{margin-top:26px;padding-top:22px}
  .hero__metric{padding:0 12px;gap:8px}
  .hero__metric dd{font-size:clamp(1.2rem,5vw,1.7rem)}
  .hero__metric dt{font-size:.625rem;letter-spacing:.025em}
  .brands__line{max-width:30ch;margin-left:auto;margin-right:auto}
  .deck{padding:40px 0 78px;margin:-18px 0 -26px}
  .deck__nav{display:none}
  .deck__dots{margin-top:-52px}
  .meet__grid{grid-template-columns:1fr;gap:24px}
  .meet__video{max-width:300px;margin:0 auto;width:100%}
  .stats__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;--fs-stat:clamp(1.05rem,4.8vw,1.7rem)}
  .stats__row > .rise{min-width:0}
  /* The shared stat component uses desktop-sized inline captions. */
  .stats__row p + p{font-size:.58rem!important;letter-spacing:.04em!important;overflow-wrap:anywhere}
  .stats__row > *:last-child{grid-column:auto}
  .cta__panel{padding:26px 18px;border-radius:var(--radius-modal)}
  .cta__choices{flex-direction:column;gap:12px}
  .cta__choices > *{width:100%}
  .footer{padding-bottom:110px}
  .mobile-cta{display:inline-flex;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:80;transform:translateY(160%);transition:transform .45s cubic-bezier(.22,1,.36,1);box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 32px rgba(var(--accent-rgb),.3)}
  .mobile-cta.is-visible{transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  .rise,.hero__media.rise{opacity:1;transform:none}
  .hero__word{animation:none;opacity:1;transform:none}
  .hero__portrait-motion{transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
}