/* Eduarda Oliveira portfolio. Shared styles for the home and the six case pages. */

@font-face{font-family:"Funnel Display";src:url(../fonts/funnel-display.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(../fonts/funnel-sans.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(../fonts/funnel-sans-italic.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(../fonts/fragment-mono.woff2) format("woff2");font-display:swap}

:root{
  /* sampled from the hero footage: shadow #091217, linen #BEA78B, cool curtain #484E50 */
  --night:#0C141A;
  --night-2:#141E26;
  --canvas:#E3E5E4;
  --panel:#EDEEEC;
  --panel-2:#F4F5F3;
  --thread:#E8DFCF;
  --thread-dim:#A7A598;
  --accent:#8C1D3A;
  --accent-hover:#A3264A;
  --accent-on-night:#D2587A;
  --accent-muted:rgba(140,29,58,.16);
  --text-primary:#15181D;
  --text-secondary:#454A52;
  --text-tertiary:#5E636B;
  --line:#C6CAC8;
  --line-strong:#8F959A;

  --display:"Funnel Display",ui-sans-serif,system-ui,sans-serif;
  --sans:"Funnel Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(6,9,13,.95),0 3px 12px rgba(6,9,13,.75),0 10px 44px rgba(6,9,13,.7);

  --gutter:clamp(16px,4.2vw,64px);
  --maxw:1320px;
  --nav-h:68px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--sans);font-size:clamp(16px,1.05vw + 9px,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:page-in .9s var(--ease-out) both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img,video,iframe,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.022em;margin:0;text-wrap:balance}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:500;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.on-night :focus-visible,.hero :focus-visible,.nav.is-over-night :focus-visible{outline-color:var(--accent-on-night)}
main{display:block}
main:focus{outline:none}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}

/* mono labels */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);display:inline-flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.kicker.no-rule::before{display:none}
@media (max-width:520px){.kicker{font-size:11px;letter-spacing:.1em;gap:10px}.kicker::before{width:18px}}
.on-night .kicker{color:var(--thread-dim)}

/* ---------- environment layer: grain + drifting fibers ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{content:"";position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 80s steps(10) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.fiber{position:absolute;top:-20vh;width:1px;height:140vh;background:linear-gradient(transparent,rgba(21,24,29,.055) 30%,rgba(21,24,29,.055) 70%,transparent);transform-origin:50% 0;animation:fiber 70s var(--ease-io) infinite alternate}
.fiber:nth-child(1){left:12%;animation-delay:-12s}
.fiber:nth-child(2){left:37%;animation-delay:-31s;animation-duration:84s}
.fiber:nth-child(3){left:71%;animation-delay:-5s;animation-duration:96s}
.fiber:nth-child(4){left:89%;animation-delay:-47s}
@media (max-width:720px){.fiber{display:none}}
@keyframes fiber{from{transform:translateX(-2vw) rotate(-1.2deg)}to{transform:translateX(2vw) rotate(1.4deg)}}
main,.footer{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:background-color .5s var(--ease-out),color .5s var(--ease-out),box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__name{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.nav__mark{width:22px;height:22px;flex:none}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-size:15px;position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.nav__cta{border:1px solid currentColor;border-radius:999px;padding:8px 16px!important}
.nav__cta::after{display:none}
.nav.is-over-night{color:var(--thread)}
.nav.is-solid{background:rgba(228,230,229,.86);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:var(--text-primary);box-shadow:0 1px 0 rgba(21,24,29,.08)}
.nav.is-hidden{transform:translateY(-100%)}
@media (max-width:640px){.nav__links li.hide-sm{display:none}}

/* ---------- buttons ---------- */
.btn{--bg:var(--accent);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:500;font-size:16px;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease-out),background-color .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out);text-shadow:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hover);transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform .5s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:currentColor;border-color:currentColor}
.btn--ghost::before{background:currentColor;opacity:.1}
.btn--light{--bg:var(--thread);--fg:var(--night)}
.btn--light::before{background:#fff}
.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:gap .4s var(--ease-out),color .3s}
.textlink:hover{gap:14px;color:var(--accent)}
@media (pointer:coarse){.btn,.textlink,.nav__links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- reveal system ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="scale"]{transform:scale(.96)}
.lines .ln{display:block;overflow:hidden;padding:.12em .04em .16em;margin:-.12em -.04em -.16em}
.lines .ln > span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease-out);transition-delay:calc(var(--l,0) * 110ms + var(--d,0ms))}
.lines.in .ln > span{transform:none}
.js-off [data-reveal]{opacity:1;transform:none}
.js-off .lines .ln > span{transform:none}

/* ---------- the garnet thread (signature line) ---------- */
.thread-layer{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:2;overflow:visible}
.thread-layer path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.thread-layer .knot{fill:var(--accent);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .7s var(--ease-out)}
.thread-layer .knot.on{transform:scale(1)}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(88px,12vw,180px) 0;position:relative}
.section__head{display:grid;gap:22px;margin-bottom:clamp(48px,6vw,88px);max-width:880px}
.h-xl{font-size:clamp(44px,6.4vw,104px);line-height:.98;letter-spacing:-.035em}
.h-lg{font-size:clamp(36px,4.6vw,72px);line-height:1;letter-spacing:-.03em}
.h-md{font-size:clamp(26px,2.6vw,40px);line-height:1.08}
.lede{font-size:clamp(18px,1.25vw + 8px,22px);line-height:1.5;color:var(--text-secondary);max-width:58ch}
.divider{height:9px;width:100%;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 4px/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 8px/100% 1px no-repeat;opacity:.9}

/* ---------- footer ---------- */
.footer{background:var(--night);color:var(--thread);padding:56px 0 40px;position:relative;z-index:1}
.footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:baseline;justify-content:space-between}
.footer a{text-decoration:none;color:var(--thread)}
.footer a:hover{color:#fff}
.footer nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--thread-dim)}

/* ---------- pause everything off-tab ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal],[data-reveal].in{opacity:1;transform:none}
  .lines .ln > span{transform:none}
  .thread-layer .knot{transform:scale(1)}
}

/* copy email: a ring draws clockwise from 12 o'clock, then becomes a check */
.btn--copy .copy-ic{width:0;height:18px;flex:none;overflow:visible;transition:width .3s var(--ease-out),margin .3s var(--ease-out);margin-right:-10px}
.btn--copy .copy-ring{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:50.3;stroke-dashoffset:50.3;transform:rotate(-90deg);transform-origin:10px 10px}
.btn--copy .copy-check{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14}
.btn--copy.is-copying .copy-ic,.btn--copy.is-copied .copy-ic{width:18px;margin-right:0}
.btn--copy.is-copying .copy-ring{animation:copy-ring .7s var(--ease-io) forwards}
.btn--copy.is-copied .copy-ring{stroke-dashoffset:0;opacity:.35;transition:opacity .3s}
.btn--copy.is-copied .copy-check{animation:copy-check .35s var(--ease-out) forwards}
@keyframes copy-ring{to{stroke-dashoffset:0}}
@keyframes copy-check{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.btn--copy.is-copied .copy-check{stroke-dashoffset:0}}