/* ═══════════════════════════════════════════════
   STYLE.CSS — Lord Devine Portfolio (one page)
   1 site · 3 login · 4 owner · 5 swipe cards
   ═══════════════════════════════════════════════ */

/* ═══════════════ 1. BASE (site-wide) ═══════════════ */
:root{
  /* ── Attack on Titan Official Palette ── */
  --bg:#20201f;
  --bg2:#181817;
  --panel:rgba(24,24,23,.92);
  --border:rgba(200,160,80,.2);
  --gold:#c8a050;           /* Scout Regiment gold */
  --gold-dim:rgba(200,160,80,.14);
  --gold-bright:#e8c070;
  --red:#cc2200;            /* Titan blood red */
  --red-dim:rgba(204,34,0,.18);
  --steel:#8a9bb0;          /* Survey Corps steel blue-grey */
  --steel-dim:rgba(138,155,176,.15);
  --cream:#d4c9b0;          /* aged parchment text */
  --text:#e8ddc8;
  --dim:#7a7060;
  --faint:#3a3428;
  --disp:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --body:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --glow:#c8a050;
  --glow-soft:rgba(200,160,80,.4);
  --line:rgba(200,160,80,.32);
  --line-soft:rgba(200,160,80,.16);

  /* ── Default look: colors taken from the Claude screenshot ── */
  --surface:#181817;        /* artifact card fill  → buttons  */
  --surface-2:#2c2c2a;      /* artifact icon tile  → hover    */
  --outline:#555552;        /* artifact card border           */
}

*{box-sizing:border-box;margin:0;padding:0;}

/* html carries the default color; body stays transparent so the
   picture layer (.sc-bg) can sit behind the page content */
html{ background:var(--bg); overflow-x:hidden; width:100%; }
html,body{
  color:var(--text);
  font-family:var(--body);
  height:100%;
  -webkit-font-smoothing:antialiased;
}
body{ background:transparent; overflow-x:hidden; width:100%; }

body{position:relative;}

body[data-page="home"]{
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}

/* ───── drawer ───── */
#drawer-overlay{
  position:fixed; inset:0; z-index:60; background:rgba(2,2,4,.75); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
#drawer-overlay.show{opacity:1; pointer-events:auto;}

#drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:70;
  width:80%; max-width:320px;
  background:var(--bg2); border-right:1px solid var(--border);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
#drawer.open{transform:translateX(0);}

.drawer-header{
  padding:24px 20px 18px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(200,160,80,.06), transparent);
}
.drawer-logo{
  font-family:var(--disp); font-weight:700; letter-spacing:.18em;
  color:var(--gold); font-size:16px;
  text-shadow:0 0 20px rgba(200,160,80,.5);
}
#drawer-close{background:none;border:none;color:var(--dim);font-size:20px;}

.drawer-nav{padding:18px 14px; overflow-y:auto;}
.drawer-section-label{
  font-size:10px; font-weight:700; letter-spacing:.18em;
  color:var(--faint); padding:14px 10px 10px;
  font-family:var(--mono); text-transform:uppercase;
}
.nav-btn{
  width:100%; display:block; text-align:left;
  background:none; border:none; text-decoration:none;
  color:var(--text); padding:13px 12px; border-radius:6px;
  font-size:14px; font-weight:600; font-family:var(--body);
  letter-spacing:.03em;
}
.nav-btn.active{background:var(--gold-dim); color:var(--gold-bright);}
.drawer-divider{height:1px; background:var(--border); margin:12px 6px;}

/* ───── pages ───── */
main{position:relative; z-index:2;}
.page{display:none;}
.page.active{display:flex; flex-direction:column;}


/* Scrollbar — AOT gold style (drawer menu keeps the dark theme) */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:#04040a;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5a2800,#8a4a10);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* ═══════════════ HOME (one-page portfolio, scoped to #v-home) ═══════════════ */
html{ background:#fbfaf8; scroll-behavior:smooth; }

#v-home{
  --hm-bg:#fbfaf8; --hm-ink:#14161b; --hm-mute:#666b76; --hm-line:#e6e3dc; --hm-accent:#f04f12;
  --hm-font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --hm-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--hm-ink); font-family:var(--hm-font);
}
#v-home button{ font-family:inherit; cursor:pointer; }
#v-home a{ -webkit-tap-highlight-color:transparent; }
.hm-wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; overflow-x:hidden; }
@media (min-width:768px){ .hm-wrap{ padding:0 32px; } }

/* header */
.hm-top{ position:sticky; top:0; z-index:40; background:rgba(251,250,248,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--hm-line); }
.hm-top-in{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.hm-top-left{ display:flex; align-items:center; gap:12px; }
.hm-logo{ display:flex; align-items:center; gap:10px; font-weight:650; font-size:16px; letter-spacing:-.01em;
  color:var(--hm-ink); text-decoration:none; }
.hm-mark{ width:28px; height:28px; border-radius:8px; background:var(--hm-ink); color:#fff; display:grid; place-items:center;
  font-family:var(--hm-mono); font-weight:600; font-size:14px; }
.hm-nav{ display:none; gap:30px; }
.hm-nav a{ color:var(--hm-mute); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .2s; }
.hm-nav a:hover{ color:var(--hm-ink); }
.hm-actions{ display:flex; align-items:center; gap:10px; }
.hm-actions .hm-btn{ height:38px; padding:0 16px; font-size:13.5px; }
.hm-menu{ width:40px; height:40px; border-radius:10px; border:1px solid var(--hm-line); background:#fff;
  display:grid; place-content:center; gap:4px; }
.hm-menu span{ display:block; width:16px; height:2px; background:var(--hm-ink); border-radius:2px; }
@media (min-width:900px){ .hm-nav{ display:flex; } .hm-menu{ display:none; } .hm-actions .hm-btn{ height:40px; padding:0 20px; font-size:14px; } }

/* buttons */
.hm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px;
  border-radius:999px; font-size:15px; font-weight:600; line-height:1; text-decoration:none; border:1px solid transparent;
  transition:transform .15s ease, background .2s ease; }
.hm-btn-dark{ background:var(--hm-ink); color:#fff; }
.hm-btn-accent{ background:var(--hm-accent); color:#fff; }
.hm-btn-ghost{ background:#fff; color:var(--hm-ink); border-color:var(--hm-line); }
.hm-btn-light{ background:#fff; color:var(--hm-ink); }
@media (hover:hover){ .hm-btn:hover{ transform:translateY(-2px); } }

/* hero */
.hm-hero{ padding:52px 0 44px; }
.hm-eyebrow{ font-family:var(--hm-mono); font-weight:500; font-size:12px; letter-spacing:.14em; color:var(--hm-mute); margin-bottom:20px; }
.hm-hero h1{ font-size:40px; font-size:clamp(38px,7.4vw,88px); line-height:1.02; letter-spacing:-.04em; font-weight:600; max-width:13em; }
.hm-hero h1 em{ font-style:normal; color:var(--hm-accent); }
.hm-lead{ margin-top:22px; max-width:34em; font-size:17px; font-size:clamp(16px,2vw,20px); line-height:1.55; color:var(--hm-mute); }
.hm-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
@media (min-width:900px){ .hm-hero{ padding:104px 0 72px; } }

/* sliding strip */
.hm-marquee{ border-top:1px solid var(--hm-line); border-bottom:1px solid var(--hm-line); padding:18px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.hm-track{ display:flex; width:max-content; animation:hm-slide 42s linear infinite; }
.hm-marquee:hover .hm-track{ animation-play-state:paused; }
.hm-chip{ flex:none; margin-right:14px; padding:10px 18px; border:1px solid var(--hm-line); border-radius:999px; background:#fff;
  font-size:14.5px; font-weight:500; white-space:nowrap; }
@keyframes hm-slide{ to{ transform:translateX(-50%); } }

/* second strip: real brand marks for the platforms/services the bots run on, always auto-scrolling */
.hm-logos-section{ padding-top:0; margin-top:56px; }
.hm-marquee-logos{ border-top:1px solid var(--hm-line); border-bottom:1px solid var(--hm-line); }
.hm-logo-item{ flex:none; display:flex; align-items:center; gap:10px; margin-right:48px;
  font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--hm-mute); white-space:nowrap;
  transition:color .2s; }
.hm-logo-item svg, .hm-logo-item img{ width:26px; height:26px; flex:none; border-radius:7px; object-fit:contain; }
.hm-marquee-logos:hover .hm-logo-item{ color:var(--hm-ink); }
@media (prefers-reduced-motion:reduce){ .hm-marquee-logos .hm-track{ animation:none; } }

/* sections */
.hm-section{ padding:76px 0 0; scroll-margin-top:70px; }
.hm-label{ font-family:var(--hm-mono); font-weight:500; font-size:12px; letter-spacing:.14em; color:var(--hm-mute); margin-bottom:14px; }
.hm-h2{ font-size:30px; font-size:clamp(28px,4.4vw,48px); line-height:1.08; letter-spacing:-.03em; font-weight:600; max-width:18em; }

/* screen-reader-only text (kept for a11y/SEO where a photo already carries the same copy visually) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* about / skills */
.body-text{ margin-top:16px; font-size:15.5px; line-height:1.65; color:var(--hm-mute); max-width:60ch; }
.about-grid{ margin-top:8px; display:grid; gap:4px; }
.about-meta{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hm-line); border:1px solid var(--hm-line); border-radius:16px; overflow:hidden; }
.am-item{ background:#fff; padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.am-label{ font-family:var(--hm-mono); font-size:11px; font-weight:500; letter-spacing:.1em; color:var(--hm-mute); text-transform:uppercase; }
.am-val{ font-size:15px; font-weight:600; color:var(--hm-ink); }
@media (min-width:640px){ .about-meta{ grid-template-columns:repeat(4,1fr); } }
.skill-pills{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.skill-pill{ padding:9px 16px; border:1px solid var(--hm-line); border-radius:999px; background:#fff; font-size:13.5px; font-weight:500; color:var(--hm-ink); }

/* service tiles (bento) */
.hm-bento{ display:grid; gap:16px; margin-top:34px; }
.bt{ position:relative; overflow:hidden; border-radius:24px; padding:26px; min-height:330px; display:flex; flex-direction:column; }
.bt-img{ padding:0; }
.bt-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bt-label{ font-family:var(--hm-mono); font-weight:500; font-size:11.5px; letter-spacing:.14em; opacity:.7; margin-bottom:14px; }
.bt h3{ font-size:26px; font-size:clamp(26px,3.3vw,38px); line-height:1.08; letter-spacing:-.03em; font-weight:560; max-width:12em; }
.bt p:not(.bt-label){ margin-top:12px; font-size:15px; line-height:1.55; max-width:34ch; opacity:.82; }
.bt-coral{ background:linear-gradient(135deg,#ee8b7c,#f3b9bd); color:#22120f; }
.bt-navy{ background:#1b2233; color:#f3f4f8; }
.bt-light{ background:#eceae5; }
.bt-peach{ background:linear-gradient(135deg,#f3a58b,#f7c6b3); color:#2a140d; }
@media (min-width:900px){ .hm-bento{ grid-template-columns:1.6fr 1fr; } .bt{ min-height:400px; padding:32px; } }

/* templates gallery */
.hm-work-head{ display:flex; flex-direction:column; gap:18px; }
@media (min-width:900px){
  .hm-work-head{ flex-direction:row; align-items:center; justify-content:space-between; gap:24px; }
  .hm-work-head .hm-h2{ max-width:9em; }
  .hm-pills{ flex-wrap:wrap; justify-content:flex-end; overflow:visible; }
}
.hm-pills{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; }
.hm-pills::-webkit-scrollbar{ display:none; }
.hm-pill{ flex:none; height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--hm-line); background:#fff; color:var(--hm-ink);
  font-size:14.5px; font-weight:500; transition:background .2s, color .2s; }
.hm-pill.on{ background:var(--hm-ink); color:#fff; border-color:var(--hm-ink); }
.hm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 18px; margin-top:28px; }
@media (min-width:1100px){ .hm-grid{ grid-template-columns:repeat(4,1fr); } }
/* clones only exist to make the mobile auto-sliding strip loop seamlessly;
   hide them everywhere else so cards never appear to repeat on tablet/desktop */
.tpl-clone{ display:none; }
@media (max-width:639px){
  .hm-grid{ display:flex; overflow:hidden; gap:14px; margin-left:-20px; margin-right:-20px;
    padding:0 20px 10px; width:max-content; animation:hm-slide-tpl 34s linear infinite; }
  .hm-grid.paused{ animation-play-state:paused; }
  .tpl{ flex:0 0 78vw; max-width:320px; }
  .tpl-clone{ display:block; }
}
@keyframes hm-slide-tpl{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .hm-grid{ animation:none; } }
.tpl[hidden]{ display:none; }
.tpl-art{ position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden; container-type:inline-size;
  transition:transform .3s ease, box-shadow .3s ease; }
@media (hover:hover){ .tpl:hover .tpl-art{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(20,22,27,.4); } }
.tpl-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:12px; }
.tpl-cap b{ font-weight:600; font-size:15px; }
.tpl-cap span{ font-family:var(--hm-mono); font-weight:500; font-size:11.5px; letter-spacing:.06em; color:var(--hm-mute); }
.tpl-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* call-to-action + footer */
.hm-band{ position:relative; overflow:hidden; margin-top:84px; padding:40px 24px; border-radius:28px; background:var(--hm-ink); color:#fff;
  min-height:320px; display:flex; align-items:flex-end; }
.hm-band-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hm-band-content{ position:relative; z-index:1; width:100%; }
.hm-band h2{ font-size:30px; font-size:clamp(28px,4.6vw,50px); line-height:1.08; letter-spacing:-.03em; font-weight:600; }
.hm-band p{ margin-top:14px; max-width:34em; color:rgba(255,255,255,.7); font-size:16px; line-height:1.55; }
@media (min-width:768px){ .hm-band{ padding:64px 56px; min-height:400px; } }
.hm-foot{ margin-top:64px; border-top:1px solid var(--hm-line); padding:28px 0 44px; color:var(--hm-mute); font-size:14px; }
.hm-foot-in{ display:flex; flex-direction:column; gap:16px; }
.hm-foot a{ color:var(--hm-mute); text-decoration:none; transition:color .2s; }
.hm-foot a:hover{ color:var(--hm-ink); }
.hm-foot-links{ display:flex; flex-wrap:wrap; gap:8px 22px; }
@media (min-width:768px){ .hm-foot-in{ flex-direction:row; justify-content:space-between; align-items:center; } }

/* gentle reveal on scroll (only when JS is running) */
.hm-anim .rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.hm-anim .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hm-anim .rv{ opacity:1; transform:none; transition:none; }
  .hm-track{ animation:none; }
  .hm-marquee{ overflow-x:auto; }
}

/* the stylised words that used Unicode small-caps are now normal letters */
.drawer-logo, .brand-word, .drawer-section-label, .tutorial-title,
.page[data-page="credits"] h1.page-title, #v-login h1{ text-transform:uppercase; }