/* ════════════════════════════════════════════════════════════════
   MARA VANCE — Editorial Portfolio System
   Shared design tokens, theming (light/dark) & motion
   ════════════════════════════════════════════════════════════════ */

/* ── Color tokens (RGB triplets → consumed by Tailwind config) ── */
:root{
  --paper: 244 241 234;   /* page bg        */
  --card:  251 250 246;   /* raised surface */
  --sand:  233 226 211;   /* tinted band    */
  --ink:    26  26  23;   /* primary text   */
  --sub:   107 103  96;   /* muted text     */
  --clay:  194  85  46;   /* accent         */
  --line:   26  26  23;   /* hairline base  */
  --grain-blend: multiply;
  --grain-opacity: .04;
  color-scheme: light;
}
.dark{
  --paper:  19  18  14;
  --card:   28  26  21;
  --sand:   34  31  25;
  --ink:   244 241 234;
  --sub:   165 159 149;
  --clay:  226 116  68;
  --line:  244 241 234;
  --grain-blend: screen;
  --grain-opacity: .05;
  color-scheme: dark;
}

html,body{ background:rgb(var(--paper)); }
body{ -webkit-font-smoothing:antialiased; transition:background .5s ease,color .5s ease; }
::selection{ background:rgb(var(--clay)); color:rgb(var(--paper)); }

/* ── Full-bleed design-width shell ── */
:root{ --dw:375; }
@media (min-width:768px){  :root{ --dw:768;  } }
@media (min-width:1024px){ :root{ --dw:1024; } }
@media (min-width:1440px){ :root{ --dw:1440; } }
@media (min-width:1920px){ :root{ --dw:1440; } }
.shell{ width:100%; padding-inline:calc(20/var(--dw)*100vw); }
@media (min-width:768px){  .shell{ padding-inline:calc(48/var(--dw)*100vw);  } }
@media (min-width:1024px){ .shell{ padding-inline:calc(72/var(--dw)*100vw);  } }
@media (min-width:1440px){ .shell{ padding-inline:calc(120/var(--dw)*100vw); } }

/* ── Paper grain overlay ── */
.grain::before{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typography helpers ── */
.head{ font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.02em;line-height:.95; }
.label{ font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase; }
.ital{ font-style:italic;font-weight:400; }

/* ── Page-load + scroll reveals ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.rise{opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}.d5{animation-delay:.5s}.d6{animation-delay:.62s}

/* staggered child reveal */
.stag>*{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.stag.in>*{opacity:1;transform:none}
.stag.in>:nth-child(2){transition-delay:.08s}
.stag.in>:nth-child(3){transition-delay:.16s}
.stag.in>:nth-child(4){transition-delay:.24s}
.stag.in>:nth-child(5){transition-delay:.32s}
.stag.in>:nth-child(6){transition-delay:.4s}

/* line-mask headline reveal */
.linemask{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.12em}
.linemask>span{display:block;transform:translateY(115%);transition:transform 1s cubic-bezier(.2,.8,.15,1)}
.lm.in .linemask>span,.lm-go .linemask>span{transform:translateY(0)}
.lm-go .linemask:nth-child(2)>span,.lm.in .linemask:nth-child(2)>span{transition-delay:.09s}
.lm-go .linemask:nth-child(3)>span,.lm.in .linemask:nth-child(3)>span{transition-delay:.18s}

/* image clip-reveal (curtain wipe) */
.imgreveal{clip-path:inset(0 0 101% 0);transform:scale(1.12);transition:clip-path 1.15s cubic-bezier(.2,.8,.15,1),transform 1.25s cubic-bezier(.2,.8,.15,1)}
.reveal.in .imgreveal,.in .imgreveal{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ── Links / arrows / magnetic ── */
.ul{position:relative}
.ul::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ul:hover::after{transform:scaleX(1)}
.arw{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
a:hover>.arw,button:hover>.arw{transform:translateX(4px)}
[data-mag]{transition:transform .3s cubic-bezier(.2,.7,.2,1)}

/* ── Project cards ── */
.proj{overflow:hidden}
.proj img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease;filter:grayscale(35%) contrast(1.02)}
.proj:hover img{transform:scale(1.06);filter:grayscale(0%)}

/* ── Marquee ── */
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:slide 30s linear infinite}

/* availability pulse */
.availdot{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Nav ── */
#nav{transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
#nav.scrolled{background:rgb(var(--paper) / .8);backdrop-filter:blur(14px);border-bottom-color:rgb(var(--line) / .12)}

/* ── Services / list rows ── */
.svc{transition:background .4s cubic-bezier(.2,.7,.2,1)}
.svc:hover{background:rgb(var(--clay) / .06)}
.svctitle{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.svcnum{transition:color .35s}
.svc:hover .svctitle{transform:translateX(10px)}
.svc:hover .svcnum{color:rgb(var(--clay))}
.svcarw{opacity:0;transform:translateX(-12px);transition:opacity .4s,transform .4s}
.svc:hover .svcarw{opacity:1;transform:translateX(0)}

/* ── Testimonial quote drop-in ── */
.qmark{left:50%;transform:translateX(-50%) translateY(18px) scale(.7);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.15,1),opacity 1s}
.reveal.in .qmark{transform:translateX(-50%) translateY(0) scale(1);opacity:1}

/* ── Work filter chips ── */
.chip{transition:color .35s,background-color .4s cubic-bezier(.2,.7,.2,1),border-color .35s}
.chip[aria-pressed="true"]{color:rgb(var(--paper));background-color:rgb(var(--ink));border-color:rgb(var(--ink))}
.chip:hover{border-color:rgb(var(--ink))}
.gitem{transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.gitem.hide{opacity:0;transform:scale(.96);position:absolute;pointer-events:none;visibility:hidden}

/* ── Form fields ── */
.fld{background:transparent;border:0;border-bottom:1.5px solid rgb(var(--line) / .22);transition:border-color .4s}
.fld:focus{outline:0;border-bottom-color:rgb(var(--clay))}
.fld::placeholder{color:rgb(var(--sub) / .7)}

/* ── Theme toggle — minimal round icon button ── */
.tgl{display:grid;place-items:center;width:40px;height:40px;border-radius:9999px;border:1px solid rgb(var(--line) / .18);background:transparent;color:rgb(var(--ink));transition:background .35s,border-color .35s,color .35s}
.tgl:hover{background:rgb(var(--sand));border-color:rgb(var(--line) / .35)}
.tgl span{display:grid;place-items:center;transition:transform .6s cubic-bezier(.2,.8,.15,1)}
.tgl:active span{transform:rotate(180deg) scale(.85)}
.tgl svg{transition:opacity .3s}
.tgl .ic-sun{display:none}.tgl .ic-moon{display:block}
.dark .tgl .ic-sun{display:block}.dark .tgl .ic-moon{display:none}

/* ── Marquee accent dot color via currentColor handled inline ── */

/* ── Custom "View" cursor (desktop, motion-safe) ── */
#pcur{display:none}
@media (min-width:900px){
  body{cursor:none} a,button{cursor:none}
  #pcur{position:fixed;top:0;left:0;z-index:90;pointer-events:none;display:grid;place-items:center;width:12px;height:12px;border-radius:9999px;background:rgb(var(--clay));transform:translate(-50%,-50%);transition:width .32s cubic-bezier(.2,.7,.2,1),height .32s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s}
  #pcur b{opacity:0;color:rgb(var(--paper));font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:opacity .2s}
  body.cur-link #pcur{width:40px;height:40px;background:rgb(var(--clay) / .14);box-shadow:inset 0 0 0 1px rgb(var(--clay))}
  body.cur-view #pcur{width:90px;height:90px;background:rgb(var(--clay))}
  body.cur-view #pcur b{opacity:1}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.linemask>span{transform:none}
  .stag>*{opacity:1;transform:none}.imgreveal{clip-path:none;transform:none}
  #pcur{display:none}
}

/* ════════════════════════════════════════════════════════════════
   Premium mobile pack — adaptive hardening (added in QA pass)
   Inert on non-notched screens / desktop (insets = 0, dvh == vh).
   ════════════════════════════════════════════════════════════════ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ overflow-x:clip; }
*{ -webkit-tap-highlight-color:transparent; }

/* Full-height sections track the visible viewport → no mobile URL-bar jump */
@supports (height:100dvh){
  .min-h-screen   { min-height:100dvh; }
  .min-h-\[78vh\] { min-height:78dvh; }
}

/* iOS safe-area / notch: solid strip behind the fixed header */
#nav{ padding-top:env(safe-area-inset-top); }
#nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:env(safe-area-inset-top); background:rgb(var(--paper)); }


/* ── Mobile ergonomics ────────────────────────────────────────────────────
   WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px interactive targets; the mobile
   menu button and inline underlined links sit just under that. */
@media (max-width: 900px) {
  .ul, a.head { display: inline-block; padding-block: 6px; }
  button.md\:hidden { min-width: 44px; min-height: 44px; }
  .field, input[type="text"], input[type="email"], textarea, select { min-height: 44px; }
}