/* ===== Interactive layer (shared) ===== */

/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold,#d9b26a),var(--gold2,#e8cd93));z-index:200;transition:transform .08s linear;
  box-shadow:0 0 14px rgba(217,178,106,.55)}

/* reveal-on-scroll — only active once JS confirms (no-JS stays fully visible) */
html.reveal-ready [data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity .75s cubic-bezier(.22,.7,.2,1),transform .75s cubic-bezier(.22,.7,.2,1);will-change:opacity,transform}
html.reveal-ready [data-reveal].in{opacity:1;transform:none}
html.reveal-ready figure[data-reveal]{transform:translateY(38px) scale(.98)}
html.reveal-ready figure[data-reveal].in{transform:none}
@media (prefers-reduced-motion: reduce){
  html.reveal-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .scroll-progress{display:none}
}

/* image polish — zoom + light sweep on hover */
.frame{position:relative;overflow:hidden}
.frame img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.04)}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform 1s ease}
.frame:hover::after{transform:translateX(130%)}

/* logo tiles: subtle zoom on card hover */
.thumb.lt,.thumb.thumb-contain{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a.case:hover .thumb.lt,a.case:hover .thumb.thumb-contain{transform:scale(1.02)}

/* nav condenses on scroll */
nav{transition:box-shadow .3s ease,backdrop-filter .3s ease}
nav.scrolled{box-shadow:0 10px 34px rgba(0,0,0,.4)}

/* gentle hero gradient drift */
@keyframes heroDrift{0%{background-position:20% 0%}100%{background-position:80% 40%}}
header.hero{background-size:150% 150%;animation:heroDrift 20s ease-in-out infinite alternate}

/* buttons: springier */
.btn{transition:transform .18s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* shared immersive aurora background (matches the home page) */
.aurora-bg{position:fixed;inset:0;z-index:-2;background:#0b0b0d url('bg/hero-bg.png') center/cover no-repeat;opacity:.4}
.aurora-veil{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,13,.55),rgba(11,11,13,.82))}
body{background:#0b0b0d !important}
nav{background:rgba(11,11,13,.6) !important;backdrop-filter:blur(12px)}

/* ===== immersive case-study storytelling ===== */
.c-hero{padding:92px 0 20px}
.c-hero .wrap,.chapter .cwrap,.c-end .wrap{max-width:1100px;margin:0 auto;padding:0 30px;width:100%}
.c-hero .kick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.c-hero .kick span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#9d998f);border:1px solid var(--line,#26262c);border-radius:999px;padding:5px 12px}
.c-hero .eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold,#d9b26a);font-weight:600}
.c-hero h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(40px,7.4vw,90px);line-height:1.0;letter-spacing:-.02em;max-width:15ch;margin-top:18px}
.c-hero .sub{color:var(--muted,#9d998f);font-size:clamp(17px,2.3vw,22px);line-height:1.5;margin-top:26px;max-width:52ch}
.c-hero .meta{display:flex;flex-wrap:wrap;gap:30px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line,#26262c)}
.c-hero .meta .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint,#6d6a63)}
.c-hero .meta .v{font-size:15px;color:#f4f2ee;margin-top:5px}
.c-hero .meta .v.gold{color:var(--gold2,#e8cd93)}

.chapter{min-height:58vh;display:flex;align-items:center;padding:36px 0}
.chapter .cwrap{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.chapter[data-side="r"] .c-media{order:2}
@media(max-width:820px){.chapter{min-height:auto;padding:46px 0}.chapter .cwrap{grid-template-columns:1fr;gap:26px}.chapter[data-side="r"] .c-media{order:0}}
.c-media .frame{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px rgba(0,0,0,.5);will-change:transform,opacity}
.c-media .frame img{display:block;width:100%;height:auto}
.c-media.tall .frame{max-width:340px;margin:0 auto}
.c-media .figcap{font-size:13px;color:var(--faint,#6d6a63);margin-top:14px;text-align:center}
.c-num{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#d9b26a);font-weight:600}
.c-text h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(28px,4.4vw,52px);line-height:1.04;letter-spacing:-.015em;margin-top:12px;color:#f4f2ee}
.c-text p{color:var(--muted,#9d998f);font-size:clamp(16px,2vw,20px);line-height:1.6;margin-top:18px;max-width:46ch}
.c-text p b{color:#f4f2ee;font-weight:600}
.c-text .go{display:inline-flex;align-items:center;gap:.5em;margin-top:26px;font-weight:600;color:#f4f2ee;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:4px}
.c-end{padding:60px 0 90px;text-align:center;border-top:1px solid var(--line,#26262c)}
.c-end h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(30px,6vw,60px);color:#f4f2ee;max-width:18ch;margin:0 auto}
.c-end .cta{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* chapter text reveal (staggered) */
html.reveal-ready .c-text>*{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.15,1),transform .8s cubic-bezier(.2,.7,.15,1)}
html.reveal-ready .c-text.in>*{opacity:1;transform:none}
html.reveal-ready .c-text.in>*:nth-child(2){transition-delay:.1s}
html.reveal-ready .c-text.in>*:nth-child(3){transition-delay:.2s}
html.reveal-ready .c-text.in>*:nth-child(4){transition-delay:.3s}
html.reveal-ready .c-text.in>*:nth-child(5){transition-delay:.4s}

/* persistent inquiries button */
.inquiries{position:fixed;z-index:120;right:24px;bottom:24px;background:var(--gold,#d9b26a);color:#1a1408;font-weight:600;
  font-size:15px;padding:14px 26px;border-radius:999px;box-shadow:0 14px 34px rgba(0,0,0,.45);letter-spacing:.01em;text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s}
.inquiries:hover{background:var(--gold2,#e8cd93);transform:translateY(-3px) scale(1.03);color:#1a1408}
@media(max-width:600px){.inquiries{right:15px;bottom:15px;padding:12px 20px;font-size:14px}}

/* persistent floating buttons: My skills + Inquiries */
.fab{position:fixed;right:24px;bottom:24px;z-index:120;display:flex;gap:12px;align-items:center}
.fab a{border-radius:999px;font-weight:600;font-size:15px;padding:14px 24px;text-decoration:none;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s,border-color .22s,color .22s}
.fab .f-skills{background:rgba(18,18,22,.82);border:1px solid rgba(255,255,255,.16);color:#f4f2ee;backdrop-filter:blur(8px)}
.fab .f-skills:hover{border-color:var(--gold,#d9b26a);color:var(--gold2,#e8cd93);transform:translateY(-3px)}
.fab .f-inq{background:var(--gold,#d9b26a);color:#1a1408;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.fab .f-inq:hover{background:var(--gold2,#e8cd93);transform:translateY(-3px)}
@media(max-width:600px){.fab{right:14px;bottom:14px;gap:8px}.fab a{padding:11px 18px;font-size:13.5px}}