/* Adam Kharfi - portfolio theme
   Visual direction adapted from the "Monica Ellis" Framer template (website template/):
   black canvas, white type, one typeface (Switzer), tight letter-spacing, thin white lines,
   text that rises letter by letter and labels that "roll" on hover. No accent colour on purpose. */

:root{
  color-scheme: dark;
  --bg:#000;
  --bg-2:#0a0a0a;            /* alternate band */
  --surface:#121212;         /* cards, inputs, placeholders */
  --surface-2:#1a1a1a;
  --line:rgba(255,255,255,.2);        /* template divider */
  --line-soft:rgba(255,255,255,.1);
  --ink:#fff;
  --ink-dim:rgba(255,255,255,.6);
  --ink-faint:rgba(255,255,255,.4);   /* template: inactive links at .4 */
  --live:#3ddc84;            /* "available" dot in the footer, chat LED */
  --font:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  --track:-.03em;            /* template letter-spacing */
  --gutter:20px;
  --ease:cubic-bezier(.12,.23,.13,.96);   /* template appear easing */
  --ease-out:cubic-bezier(.25,1,.5,1);    /* template fade easing */
  --ease-roll:cubic-bezier(.65,0,.35,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--bg);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:var(--track);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:var(--font); font-weight:600; letter-spacing:-.04em; line-height:1.05; margin:0; text-wrap:balance;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; letter-spacing:inherit;}
img{max-width:100%; display:block;}
::selection{background:#fff; color:#000;}
.wrap{padding:0 var(--gutter); max-width:1600px; margin:0 auto;}
section{position:relative;}
.muted{color:var(--ink-dim);}
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{outline:1px solid #fff; outline-offset:4px;}

/* Small uppercase-free label used above titles (template: 14px / 600 / white .6) */
.eyebrow{font-size:14px; font-weight:600; color:var(--ink-dim); letter-spacing:var(--track);}

/* ---------- Text roll on hover ----------
   The label slides up and an identical copy (drawn with text-shadow) slides in from below,
   so it works with any text, including the French translation injected by i18n.js. */
.roll{display:inline-flex; overflow:hidden; line-height:1.25; vertical-align:top;}
.roll > span{display:inline-block; text-shadow:0 1.25em 0 currentColor; transition:transform .5s var(--ease-roll);}
a:hover .roll > span, button:hover .roll > span, a:focus-visible .roll > span, button:focus-visible .roll > span,
.roll:hover > span{transform:translateY(-1.25em);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-size:14px; font-weight:600; letter-spacing:var(--track);
  padding:12px 18px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.btn:hover{border-color:#fff;}
.btn.solid{background:#fff; color:#000; border-color:#fff;}
.btn.solid:hover{background:rgba(255,255,255,.85);}
.btn[disabled]{opacity:.4; cursor:not-allowed;}
.btn .arrow, .arrow-link .arrow{display:inline-block; transition:transform .4s var(--ease-roll);}
.btn:hover .arrow, .arrow-link:hover .arrow{transform:translate(3px,-3px);}
.arrow-link{display:inline-flex; align-items:center; gap:6px; font-weight:600;}

/* ---------- Header: same layout and menu as the template ----------
   Columns .7 / .5 / auto (brand, menu, info), 15px 20px padding, 14px / 600 / 125%.
   "Menu" is a button: hover → opacity .4; click → it reads "Close" and the links fade in on the same
   line, one every .1 s (linear, .5 s each). Closing fades them out in reverse order (.2 s).
   Links sit at opacity .4 and go to 1 on hover. Timings copied from the template's Framer component. */
header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  mix-blend-mode:difference;             /* stays readable over images and the white CV sheet */
}
.nav-row{display:grid; grid-template-columns:.7fr .5fr auto; align-items:start; gap:0; padding:15px var(--gutter); line-height:1.25; font-weight:600;}
.brand{display:flex; flex-direction:column; gap:0; color:#fff; justify-self:start;}
.brand .brand-role{color:var(--ink-dim);}
.menu{display:flex; align-items:flex-start; gap:10px; color:#fff; white-space:nowrap;}
.menu-toggle{
  flex:none; background:none; border:0; padding:0; margin:0; color:#fff; cursor:pointer;
  font:inherit; font-weight:600; line-height:1.25; letter-spacing:var(--track);
  transition:opacity .3s cubic-bezier(.2,.9,.3,1);       /* template: spring, stiffness 500 / damping 60 */
}
.menu-toggle:hover, .menu-toggle:focus-visible{opacity:.4;}
ul.links{display:flex; gap:10px; list-style:none; margin:0; padding:0; pointer-events:none;}
ul.links li{opacity:0; visibility:hidden; transition:opacity .2s linear, visibility 0s linear .5s;}
/* closing order: last link first */
ul.links li:nth-child(1){transition-delay:.15s, .5s;}
ul.links li:nth-child(2){transition-delay:.1s, .5s;}
ul.links li:nth-child(3){transition-delay:.05s, .5s;}
ul.links li:nth-child(4){transition-delay:.01s, .5s;}
.menu.open ul.links{pointer-events:auto;}
.menu.open ul.links li{opacity:1; visibility:visible; transition:opacity .5s linear, visibility 0s;}
.menu.open ul.links li:nth-child(1){transition-delay:.1s, 0s;}
.menu.open ul.links li:nth-child(2){transition-delay:.2s, 0s;}
.menu.open ul.links li:nth-child(3){transition-delay:.3s, 0s;}
.menu.open ul.links li:nth-child(4){transition-delay:.4s, 0s;}
ul.links a{display:block; color:#fff; opacity:.4; transition:opacity .25s cubic-bezier(.2,.9,.3,1);}
ul.links a:hover, ul.links a:focus-visible, ul.links a.active{opacity:1;}
.nav-info{justify-self:end; display:flex; align-items:flex-start; gap:18px; color:#fff;}
.nav-toggle{display:none;}

/* Mobile: "Menu" opens a full-screen sheet with large links */
@media (max-width:809px){
  header{mix-blend-mode:normal; background:linear-gradient(#000 40%, transparent);}
  .nav-row{grid-template-columns:1fr auto; padding:16px 15px;}
  .menu, .nav-info .info-year{display:none;}
  .nav-toggle{
    display:inline-flex; background:none; border:0; padding:0; color:#fff; font-weight:600; font-size:14px; cursor:pointer; line-height:1.25; transition:opacity .3s ease;
  }
  .nav-info{gap:16px;}
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"]{opacity:.4;}
  .mobile-menu{
    position:fixed; inset:0; z-index:99; background:#000; padding:110px 15px 30px;
    display:flex; flex-direction:column; justify-content:space-between;
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease-out), visibility 0s linear .4s;
  }
  .mobile-menu.open{opacity:1; visibility:visible; transition:opacity .4s var(--ease-out);}
  .mobile-menu ul{list-style:none; margin:0; padding:0;}
  .mobile-menu li{overflow:hidden; border-bottom:1px solid var(--line-soft);}
  .mobile-menu ul a{display:block; font-size:40px; font-weight:600; letter-spacing:-.05em; padding:10px 0; transform:translateY(100%); transition:transform .6s var(--ease);}
  .mobile-menu.open ul a{transform:none;}
  .mobile-menu li:nth-child(2) a{transition-delay:.05s;} .mobile-menu li:nth-child(3) a{transition-delay:.1s;} .mobile-menu li:nth-child(4) a{transition-delay:.15s;}
  .mobile-menu ul a.active{color:var(--ink-dim);}
  .mobile-menu .mm-foot{color:var(--ink-dim); font-weight:600; display:flex; justify-content:space-between;}
}
@media (min-width:810px){ .mobile-menu{display:none;} }

/* ---------- Appear animations (only when JS runs: html.js) ---------- */
/* Template: opacity 0 → 1, y 50 → 0, .7 s, ease (.12,.23,.13,.96) */
html.js .reveal{opacity:0; transform:translateY(50px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
html.js .reveal.in{opacity:1; transform:none;}
html.js .reveal.d1{transition-delay:.1s;} html.js .reveal.d2{transition-delay:.2s;} html.js .reveal.d3{transition-delay:.3s;}

/* Letter-by-letter rise (js/main.js splits [data-split] into .ch spans) */
.split .w{display:inline-block; white-space:nowrap;}
.split .ch{display:inline-block; will-change:transform, opacity;}
html.js .split:not(.shown) .ch{opacity:0; transform:translateY(var(--rise, 50px));}
.split.shown .ch{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i) * var(--step, 30ms) + var(--delay, 0ms));}
.split.settled .ch{transition:none;}

/* Lines that draw from left to right (template "Line Animation") */
.line{height:1px; background:var(--line); transform-origin:left center;}
html.js .line{transform:scaleX(0); transition:transform 1.6s var(--ease-out);}
html.js .line.in{transform:scaleX(1);}

/* ---------- Section heading row (label left, content right) ---------- */
.band{padding:150px 0 100px;}
.band-alt{background:var(--bg-2);}
.sec-head{display:grid; grid-template-columns:.5fr 1fr; gap:20px; margin-bottom:60px; align-items:start;}
.sec-head .eyebrow{padding-top:.5em;}
.sec-head h2{font-size:clamp(30px,3.4vw,40px);}
.sec-head p.lead{color:var(--ink-dim); margin-top:16px; max-width:560px; font-size:16px;}
@media (max-width:809px){ .band{padding:100px 0 80px;} .sec-head{grid-template-columns:1fr; margin-bottom:40px;} }

/* ---------- Image placeholders (design images to come) ----------
   Replace a .ph block with an <img> or <video> when the visuals are ready; the frame keeps its size. */
.ph{
  position:relative; overflow:hidden; background:var(--surface);
  background-image:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(80% 70% at 85% 95%, rgba(255,255,255,.05), transparent 60%);
}
.ph::after{   /* fine grid, very subtle */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
}
.ph-label{position:absolute; left:20px; bottom:16px; z-index:1; font-size:12px; font-weight:600; color:var(--ink-faint);}
.ph img, .ph video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}

/* ---------- Footer (template: big links left, socials right, tiny details below) ---------- */
footer{padding:40px var(--gutter) 15px; background:var(--bg);}
.footer-row{display:grid; grid-template-columns:.7fr .3fr; gap:20px; margin-top:40px;}
.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;}
.footer-links a{font-size:24px; font-weight:600; letter-spacing:-.04em; color:var(--ink-faint); transition:color .25s ease;}
.footer-links a:hover, .footer-links a.active{color:#fff;}
.footer-side{display:flex; flex-direction:column; gap:5px; font-weight:600;}
.footer-side a{color:var(--ink-dim); transition:color .25s ease;}
.footer-side a:hover{color:#fff;}
.footer-place{display:inline-flex; align-items:center; gap:8px; color:#fff; margin-bottom:14px;}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(61,220,132,.6); animation:live 2.2s ease-out infinite;}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55);} 70%{box-shadow:0 0 0 8px rgba(61,220,132,0);} 100%{box-shadow:0 0 0 0 rgba(61,220,132,0);}}
.footer-bottom{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:120px; font-size:12px; font-weight:600; color:var(--ink-dim);}
.footer-bottom a:hover{color:#fff;}
.footer-giant{
  font-size:clamp(56px,18.6vw,330px); font-weight:700; letter-spacing:-.07em; line-height:.8; margin-top:60px;
  color:#fff; white-space:nowrap; overflow:hidden;
}
@media (max-width:809px){ .footer-row{grid-template-columns:1fr; gap:60px;} .footer-bottom{margin-top:60px;} }

/* ---------- Page transitions ----------
   Native (Chrome, Edge, Safari 18.2+): cross-document View Transitions. The header keeps its own layer
   so it stays still; the rest of the old page slides up and fades out, the new page rises in, and its
   letter-by-letter titles play on top. Fallback for other browsers: same motion in js/main.js (.pt-*). */
@view-transition{navigation:auto;}
header{view-transition-name:site-header;}
::view-transition-group(site-header){animation:none;}
::view-transition-old(site-header){display:none;}
::view-transition-new(site-header){animation:none;}
::view-transition-old(root){animation:pt-out .4s var(--ease-roll) both;}
::view-transition-new(root){animation:pt-in .75s var(--ease) .28s both;}
@keyframes pt-out{to{opacity:0; transform:translateY(-40px);}}
@keyframes pt-in{from{opacity:0; transform:translateY(60px);}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important;}
}

/* JS fallback (no View Transitions): main + footer fade in on arrival, fade out before leaving. */
html.pt-fallback main, html.pt-fallback footer{animation:pt-in .8s var(--ease) backwards;}
html.pt-leaving main, html.pt-leaving footer{opacity:0; transform:translateY(-40px); transition:opacity .42s var(--ease-roll), transform .42s var(--ease-roll);}

/* ---------- Footer credit: beating heart ("Made with ♥") ----------
   Red (the only colour on the site, so it stands out), double beat (lub-dub) every 1.4 s,
   faster on hover. Still for reduced motion. */
.heart{display:inline-flex; vertical-align:-1px; margin:0 1px; color:#ff4d5e; filter:drop-shadow(0 0 6px rgba(255,77,94,.45)); transform-origin:50% 60%; animation:heartbeat 1.4s ease-in-out infinite;}
.heart svg{display:block; overflow:visible;}
.footer-bottom span:hover .heart{animation-duration:.7s;}
@keyframes heartbeat{
  0%, 40%, 100%{transform:scale(1);}
  10%{transform:scale(1.28);}
  20%{transform:scale(.96);}
  30%{transform:scale(1.18);}
}