/* v4 entrance card: masked headline, word slot, stats, project deck, service marquee */
#hero{overflow:hidden;padding-bottom:0!important}
#hero:after{content:'';position:absolute;left:0;top:0;width:34%;height:2px;background:linear-gradient(90deg,transparent,#ff2a55,transparent);animation:hscan 5s cubic-bezier(.6,0,.4,1) infinite;pointer-events:none}
@keyframes hscan{0%{transform:translateX(-100%)}60%,100%{transform:translateX(300%)}}
#hero .hero2{grid-template-columns:1.22fr 1fr!important;gap:40px!important;align-items:center!important}

/* headline */
#hero .arrival-line{display:flex;align-items:center;gap:10px}
.al-dot{width:8px;height:8px;border-radius:50%;background:#ff2a55;box-shadow:0 0 0 0 #ff2a5599;animation:alp 2s infinite}
@keyframes alp{70%{box-shadow:0 0 0 10px #ff2a5500}100%{box-shadow:0 0 0 0 #ff2a5500}}
#hero h2.h-rev{font-size:60px!important;line-height:.98!important;letter-spacing:-.045em!important;margin:0!important}
.h-rev .ln{display:block;overflow:hidden;padding:0 .04em .06em 0;margin-bottom:-.06em}
.h-rev .ln>i{display:block;font-style:normal}
#hero.is-active .h-rev .ln>i{animation:lnup 1s cubic-bezier(.16,1,.3,1) both}
#hero.is-active .h-rev .ln:nth-child(2)>i{animation-delay:.1s}
#hero.is-active .h-rev .ln:nth-child(3)>i{animation-delay:.2s}
#hero.is-active .h-rev .ln:nth-child(4)>i{animation-delay:.3s}
@keyframes lnup{from{transform:translateY(105%)}to{transform:none}}
.wslot{display:block;height:1.02em;line-height:1;overflow:hidden;padding-right:.04em}
.wtrack{display:flex;flex-direction:column;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.wtrack.snap{transition:none}
.wtrack em,#hero h2 .wtrack em{display:block!important;height:1.02em;padding-top:.02em;line-height:1;font-style:normal;color:#ff2a55;background:linear-gradient(90deg,#ff2a55,#ff7a59);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#hero .cd-lede{max-width:470px;margin-top:22px!important}
#hero .panel-actions{margin-top:28px!important}

/* stats */
.hero-stats{display:flex;gap:0;margin-top:28px;border-top:1px solid #ffffff1a}
.hero-stats span{flex:1;display:flex;align-items:center;gap:10px;padding:16px 14px 0 0}
.hero-stats span+span{padding-left:16px;border-left:1px solid #ffffff14}
.hero-stats b{font:800 40px/1 var(--display);letter-spacing:-.04em;color:#fff;min-width:.65em}
.hero-stats b:after{content:'+';color:#ff2a55;font-size:.6em;vertical-align:.5em}
.hero-stats small{font:500 10px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#c9c2bb}

/* deck */
.deck{position:relative;display:flex;flex-direction:column;gap:18px}
.dk-tag{position:absolute;left:0;top:0;z-index:9;display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:#09090b;border:1px solid #ffffff24;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f3eee6}
.dk-tag i{width:7px;height:7px;border-radius:50%;background:#2bd67b;box-shadow:0 0 10px #2bd67b;animation:alp 2s infinite}
.dk-stack{position:relative;height:400px;--rx:0deg;--ry:0deg;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s ease-out}
.win{position:absolute;left:0;bottom:0;width:86%;margin:0;border-radius:16px;overflow:hidden;background:#0d0d10;border:1px solid #ffffff26;box-shadow:0 40px 80px -30px #000,0 0 0 1px #00000080;transform-origin:50% 100%;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .7s ease;cursor:pointer}
.win-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#17171b;border-bottom:1px solid #ffffff12}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin-left:10px;flex:1;height:18px;line-height:18px;padding:0 10px;border-radius:6px;background:#0b0b0d;font:500 10.5px var(--mono);letter-spacing:.06em;color:#9b948e;white-space:nowrap;overflow:hidden}
.win-img{aspect-ratio:16/10;overflow:hidden}
.win-img img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 5s linear}
.win:before{content:'';position:absolute;inset:0;z-index:2;background:#060608;opacity:0;transition:opacity .9s;pointer-events:none}
.win .shine{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff2e 48%,transparent 60%);transform:translateX(-120%)}
.win[data-pos="0"]{z-index:6;transform:none}
.win[data-pos="0"] img{transform:scale(1.07)}
.win[data-pos="0"] .shine{animation:shine 1.3s .55s cubic-bezier(.4,0,.2,1)}
@keyframes shine{to{transform:translateX(120%)}}
.win[data-pos="1"]{z-index:5;transform:translate(8%,-17%) scale(.92) rotate(3deg)}
.win[data-pos="1"]:before{opacity:.38}
.win[data-pos="2"]{z-index:4;transform:translate(15%,-33%) scale(.84) rotate(6deg)}
.win[data-pos="2"]:before{opacity:.6}
.win[data-pos="3"],.win[data-pos="4"],.win[data-pos="5"]{z-index:3;opacity:0;transform:translate(20%,-44%) scale(.76) rotate(9deg)}
.win[data-pos="out"]{z-index:7;opacity:0;transform:translate(-55%,18%) scale(.96) rotate(-16deg)}
.win.snap{transition:none!important}
.win[data-pos="0"]:hover{transform:translateY(-6px)}

.dk-info{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
.dk-num{display:flex;align-items:baseline;gap:6px;font-family:var(--display)}
.dk-num b{font:800 40px/1 var(--display);letter-spacing:-.04em;color:#fff}
.dk-num small{font:500 12px var(--mono);color:#8f8882}
.dk-name{display:grid;gap:5px;overflow:hidden}
.dk-name b{font:800 24px/1 var(--display);letter-spacing:-.02em;color:#fff}
.dk-name small{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#ff2a55}
.dk-name.swap>*{animation:nmin .7s cubic-bezier(.16,1,.3,1) both}.dk-name.swap small{animation-delay:.06s}
@keyframes nmin{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}
.dk-nav{display:flex;gap:8px}
.dk-nav button{width:46px;height:46px;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff08;color:#fff;font-size:17px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.dk-nav button:hover{background:#ff2a55;border-color:#ff2a55;transform:scale(1.06)}
#hero .sl-bars{position:static;display:flex;gap:6px}

/* marquee */
.hero-marquee{margin:30px -56px 0;padding:16px 0;border-top:1px solid #ffffff14;background:#ff2a550d;overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;gap:26px;animation:mq 36s linear infinite}
.mq-track span{font:700 15px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#e6e0d8}
.mq-track b{color:#ff2a55;font-size:13px}
@keyframes mq{to{transform:translateX(-50%)}}

@media (max-width:900px){
  #hero .hero2{grid-template-columns:minmax(0,1fr)!important;gap:30px!important}
  #hero .hero2>*{min-width:0}
  #hero h2.h-rev{font-size:34px!important}
  #hero .arrival-line{font-size:11px!important;letter-spacing:.12em!important}
  #hero .panel-actions{flex-wrap:wrap}
  .hero-stats small{letter-spacing:.06em}
  .hero-stats b{font-size:32px}
  .hero-stats span{flex-direction:column;align-items:flex-start;gap:6px;padding-right:8px}.hero-stats span+span{padding-left:12px}
  .hero-stats small br{display:none}
  .hero-stats small{font-size:9px}
  .dk-stack{height:auto;aspect-ratio:1.3}
  .dk-nav button{width:40px;height:40px}
  .dk-name b{font-size:19px}
  .hero-marquee{margin:30px -22px 0}
}
@media (prefers-reduced-motion:reduce){
  .h-rev .ln>i{transform:none!important;animation:none!important}
  .mq-track,#hero:after,.win .shine{animation:none!important}
}
.dk-stack:before{content:'';position:absolute;left:-6%;right:-2%;bottom:-8%;height:70%;background:radial-gradient(50% 50% at 45% 60%,#ff2a5540,transparent 70%);pointer-events:none}
.reading-mode .world-panel.card,.fallback .world-panel.card{width:min(1240px,92vw)!important}

/* cards sit flush inside their wall frame: height follows the frame's aspect */
body:not(.mobile):not(.reading-mode):not(.fallback) .world-panel[data-mount],
body:not(.mobile):not(.reading-mode):not(.fallback) .world-panel.wing-panel{min-height:calc(var(--fit-r,0) * var(--fit-w,1240px))!important;display:flex!important;flex-direction:column;justify-content:center}
body .world-panel.gallery-panel.wing-panel{--fit-w:1280px}
body:not(.mobile):not(.reading-mode):not(.fallback) .world-panel[data-mount]{background:linear-gradient(135deg,#0a0a0cf5,#12060cf0)!important;border-radius:6px!important}
body:not(.mobile):not(.reading-mode):not(.fallback) .world-panel.gallery-panel.wing-panel>.ex{flex:1;border-radius:6px;background:linear-gradient(135deg,#0a0a0cf5,#12060cf0)!important}
body:not(.mobile):not(.reading-mode):not(.fallback) .world-panel.wing-end{border-radius:6px!important}

/* portfolio exhibits: full screenshot in a browser window over a dimmed copy of itself */
.ex .ex-frame.has-shot .gallery-art,.lit .ex-frame.has-shot .gallery-art{filter:brightness(.32) saturate(.85)!important;transform:scale(1.3)!important}
.has-shot.inspecting .gallery-art{transform:scale(1.34)!important}
.ex-shot{position:absolute;left:7%;right:7%;top:50%;z-index:1;border-radius:14px;overflow:hidden;background:#0d0d10;border:1px solid #ffffff30;box-shadow:0 50px 90px -30px #000,0 0 0 1px #0008,0 30px 120px -50px var(--accent);transform:translateY(-54%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.ex-shot-img{aspect-ratio:16/10;background:center/cover no-repeat}
.has-shot.inspecting .ex-shot{transform:translateY(-54%) scale(1.035)}
.has-shot .ex-loupe,.has-shot .ex-hint{display:none!important}
@media (max-width:900px){.ex-shot{left:5%;right:5%}.ex-shot .win-bar{height:22px}}