/* ============================================================
   ALAN BOUTEILLER - cartoon-pro personal site
   Shared design system
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Jacquard+12&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---- Tokens ---- */
:root{
  --cream:      #FBF1DA;
  --cream-deep: #F2E3BE;
  --paper:      #FFFAEE;
  --ink:        #1B1410;
  --ink-soft:   #4A3D33;

  --red:    #E5352B;
  --blue:   #1B6FE3;
  --yellow: #FFC400;
  --green:  #1E9E66;
  --purple: #6B4FE0;

  --shadow: 7px 7px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-lg: 12px 12px 0 var(--ink);
  --bd: 3px solid var(--ink);
  --bd-fat: 5px solid var(--ink);

  --maxw: 1320px;
  --ease: cubic-bezier(.2,.9,.25,1.1);

  --ff-display: 'Anton', sans-serif;
  --ff-deco: 'Jacquard 12', serif;
  --ff-body: 'Archivo', sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;
}

/* ---- Reset ---- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  font-size:18px;
  overflow-x:hidden;
  /* dot paper texture */
  background-image:radial-gradient(var(--cream-deep) 1.4px, transparent 1.5px);
  background-size:22px 22px;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
ul{ list-style:none; }
.styled{ list-style: initial; }
::selection{ background:var(--yellow); color:var(--ink); }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }
.section{ padding-block:clamp(72px,11vw,150px); position:relative; }
.stack-sm > * + *{ margin-top:.6rem; }
.row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }

/* ---- Type ---- */
.display{
  font-family:var(--ff-display);
  font-weight:400;
  line-height:.95;
  letter-spacing:0;
  text-transform:uppercase;
}
.kicker{
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:700;
}
.lead{ font-size:clamp(1.1rem,2.1vw,1.5rem); line-height:1.5; font-weight:500; }
.deco{ font-family:var(--ff-deco); line-height:1; }

/* Outline + hard-shadow numeral (Jacquard) - the signature treatment */
.num{
  font-family:var(--ff-deco);
  font-size:clamp(4rem,12vw,10rem);
  line-height:.8;
  color:var(--cream);
  -webkit-text-stroke:3px var(--ink);
  text-shadow:
     6px 6px 0 var(--red),
     6px 6px 0 var(--ink);
  display:inline-block;
}
.num.blue{ text-shadow:6px 6px 0 var(--blue),6px 6px 0 var(--ink); }
.num.yellow{ text-shadow:6px 6px 0 var(--yellow),6px 6px 0 var(--ink); }
.num.green{ text-shadow:6px 6px 0 var(--green),6px 6px 0 var(--ink); }
.num.purple{ text-shadow:6px 6px 0 var(--purple),6px 6px 0 var(--ink); }

/* hollow outline display word */
.hollow{
  color:transparent;
  -webkit-text-stroke:3px var(--ink);
}

/* ---- Hash glyph stamp ---- */
.hash{
  font-family:var(--ff-display);
  display:inline-grid;
  place-items:center;
  color:var(--ink);
  transform:rotate(-8deg);
}

/* ============================================================
   Components
   ============================================================ */

/* Buttons - sticker pills */
.btn{
  --bg:var(--yellow);
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--ff-body); font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
  font-size:1rem; line-height:1;
  padding:.95em 1.5em;
  background:var(--bg); color:var(--ink);
  border:var(--bd); border-radius:999px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .15s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn.red{ --bg:var(--red); color:var(--paper); }
.btn.blue{ --bg:var(--blue); color:var(--paper); }
.btn.ink{ --bg:var(--ink); color:var(--paper); }
.btn.ghost{ --bg:transparent; box-shadow:none; }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }

/* Sticker card */
.card{
  background:var(--paper);
  border:var(--bd);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:clamp(20px,3vw,34px);
  position:relative;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.card.hover:hover{ transform:translate(-3px,-3px) rotate(-.4deg); box-shadow:var(--shadow-lg); }

.tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.4em .7em; border:2px solid var(--ink); border-radius:999px;
  background:var(--cream);
}
.tag.red{ background:var(--red); color:var(--paper); border-color:var(--ink); }
.tag.blue{ background:var(--blue); color:var(--paper); }
.tag.yellow{ background:var(--yellow); }
.tag.green{ background:var(--green); color:var(--paper); }

/* Underline link */
.ul-link{
  font-weight:700; position:relative; white-space:nowrap;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:100% 3px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s var(--ease), color .2s;
  padding-bottom:2px;
}
.ul-link:hover{ background-size:0% 3px; color:var(--red); }

/* Image placeholder (for user's real mascot / shots) */
.ph{
  border:var(--bd-fat); border-radius:16px;
  background:
    repeating-linear-gradient(45deg, var(--cream-deep) 0 12px, transparent 12px 24px),
    var(--paper);
  display:grid; place-items:center; text-align:center;
  font-family:var(--ff-mono); font-size:.78rem; color:var(--ink-soft);
  letter-spacing:.04em; padding:1.5rem; position:relative;
}
.ph span{ background:var(--paper); padding:.3em .6em; border:2px dashed var(--ink-soft); border-radius:8px; }

/* ============================================================
   Navbar - centered logo + hamburger overlay menu
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:80;
  background:var(--cream);
}
.nav-bar{
  position:absolute; bottom:0; left:0; width:100%; height:3px;
  background:var(--ink);
  transform-origin:left center;
  pointer-events:none;
}
.nav .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:78px; gap:1rem; }

.nav-edge{ justify-self:start; font-family:var(--ff-mono); font-weight:700; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.4em; }
.nav-edge .ar{ transition:transform .2s var(--ease); }
.nav-edge:hover{ color:var(--red); } .nav-edge:hover .ar{ transform:translate(2px,-2px); }

/* rolling star (spins with scroll speed) */
.nav-star{ justify-self:start; width:clamp(38px,4.4vw,52px); height:auto; line-height:0; will-change:transform; }
.nav-star svg{ width:100%; height:auto; display:block; transform-origin:center center; overflow:visible; }
/* "wiii" bubbles that pop around the star while scrolling */
.wii-bubble{ position:fixed; left:0; top:0; width:80px; height:auto; margin-left:-40px; margin-top:-40px;
  opacity:0; pointer-events:none; z-index:90; line-height:0; color:var(--red); }
.wii-bubble svg{ width:100%; height:auto; display:block; overflow:visible; }
.wii-bubble svg path{ fill:currentColor; }

/* signature brand */
.brandsig-wrap{ display:inline-block; line-height:0; vertical-align:middle; }
.brandsig{ height:clamp(40px,5.4vw,58px); width:auto; display:block; }

.brand{ justify-self:center; display:flex; align-items:center; gap:.45rem; color:var(--red); line-height:.9; }
.brand .dot{ width:.5em; height:.5em; background:var(--blue); border:2px solid var(--ink); border-radius:50%; align-self:flex-start; margin-top:.5em; }
.brand .brand-tx{ font-family:var(--ff-deco); font-size:2rem; display:flex; flex-direction:column; align-items:center; }
.brand .brand-tx sup{ font-size:.4em; color:var(--ink); vertical-align:super; }
.brand .brand-tx small{ font-family:var(--ff-mono); font-size:.34rem; letter-spacing:.34em; color:var(--ink-soft); text-transform:uppercase; margin-top:-.2em; }
.brand:hover .dot{ background:var(--yellow); }

/* hamburger */
.nav-toggle{ justify-self:end; display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center;
  background:var(--yellow); border:var(--bd); border-radius:12px; width:54px; height:46px; cursor:pointer;
  box-shadow:0 4px 0 var(--ink); transition:transform .1s var(--ease), box-shadow .1s var(--ease), background .15s; z-index:120; }
.nav-toggle:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--ink); }
.nav-toggle i{ display:block; width:24px; height:3px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.nav-toggle.open{ background:var(--red); }
.nav-toggle.open i{ background:var(--paper); }
.nav-toggle.open i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open i:nth-child(2){ opacity:0; }
.nav-toggle.open i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* full-screen overlay menu */
.nav-links{
  position:fixed; inset:0; z-index:110;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  padding:6rem 1.5rem 3rem;
  opacity:0; visibility:hidden;
  transition:opacity .06s ease, visibility .06s;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.6px); background-size:26px 26px;
}
.nav-links.open{ opacity:1; visibility:visible; transform:none; }
.nav-postit{ position:absolute; top:18%; left:24%;
  background:var(--green); color:var(--paper); border:var(--bd); box-shadow:var(--shadow);
  padding:clamp(12px,1.8vw,20px); width:clamp(155px,15vw,224px);
  font-family:var(--ff-mono); cursor:grab; user-select:none; touch-action:none; }
.nav-postit:active{ cursor:grabbing; }
.nav-postit .sticker-kicker{ font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:9px; }
.nav-postit .sticker-body{ font-size:clamp(.7rem,1.1vw,.88rem); line-height:1.65; text-align:center; }
@media (max-width:560px){ .nav-postit{ display:none; } }
.nav-links .menu-kick{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:var(--yellow); margin-bottom:.5rem; }
.key{
  --cap:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.8rem,6vw,3.4rem); line-height:1;
  padding:.34em .7em .3em; color:var(--ink); background:var(--cap);
  border:var(--bd); border-radius:14px;
  box-shadow:0 6px 0 #000, 0 7px 0 1px rgba(0,0,0,.4);
  transition:transform .1s var(--ease), box-shadow .1s var(--ease), background .15s, color .15s;
}
.kbsup{ font-family:var(--ff-mono); font-weight:700; opacity:.5; }
.key .kbsup{ font-size:.34em; }
.menu-kick .kbsup{ font-size:.48em; margin-left:.45em; vertical-align:middle; }
.key:hover{ transform:translateY(3px) rotate(-1deg); box-shadow:0 3px 0 #000, 0 4px 0 1px rgba(0,0,0,.4); background:var(--yellow); }
.key:active,.key.active{ transform:translateY(6px); box-shadow:0 0 0 #000; }
.key.active{ background:var(--red); color:var(--paper); }
.key:nth-child(2):hover{ background:var(--blue); color:var(--paper); }
.key:nth-child(4):hover{ background:var(--green); color:var(--paper); }
.key:nth-child(6):hover{ background:var(--purple); color:var(--paper); }

@media (max-width:560px){
  .nav-star{ width:36px; }
  .nav .wrap{ grid-template-columns:auto 1fr auto; }
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-block:var(--bd); background:var(--ink); color:var(--cream);
  overflow:hidden; white-space:nowrap; padding-block:.55em;
}
.marquee.red{ background:var(--red); color:var(--paper); }
.marquee.blue{ background:var(--blue); color:var(--paper); }
.marquee.yellow{ background:var(--yellow); color:var(--ink); }
.marquee-track{ display:inline-flex; gap:2.2rem; align-items:center; will-change:transform; animation:marq 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee.rev .marquee-track{ animation-direction:reverse; }
.marquee-track > span{
  font-family:var(--ff-display); text-transform:uppercase; font-size:1.4rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:1.4rem;
}
.marquee-track .star{ color:inherit; opacity:.7; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================
   Footer
   ============================================================ */
.foot{ background:var(--ink); color:var(--cream); border-top:var(--bd); }
.foot .wrap{ padding-block:clamp(48px,7vw,84px); }
.foot a.ul-link{ background-image:linear-gradient(var(--cream),var(--cream)); }
.foot a.ul-link:hover{ color:var(--yellow); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.foot h4{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); margin-bottom:1rem; }
.foot .big{ font-size:clamp(2.6rem,7vw,5rem); color:var(--cream); line-height:.9; }
.gpg{ font-family:var(--ff-mono); font-size:.7rem; color:#9b8e7f; word-break:break-all; margin-top:1.4rem; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* ============================================================
   Reveal animation
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(26px) rotate(-1deg); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
}

/* float / wiggle utilities */
@media (prefers-reduced-motion:no-preference){
  .float{ animation:float 5s ease-in-out infinite; }
  @keyframes float{ 50%{ transform:translateY(-14px); } }
  .wiggle{ animation:wiggle 6s ease-in-out infinite; transform-origin:center; }
  @keyframes wiggle{ 25%{ transform:rotate(4deg);} 75%{ transform:rotate(-4deg);} }
  .spin{ animation:spin 18s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg);} }
}

/* ---- Tooltip ---- */
.tip{
  position:relative; display:inline-block;
  cursor:default;
  border-bottom:2px dashed var(--ink-soft);
}
/* floating bubble driven by JS */
.tip-bubble{
  position:fixed; pointer-events:none; z-index:200;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.45;
  color:var(--paper);
  background:var(--ink);
  border:2px solid var(--ink);
  border-radius:8px;
  padding:.45em .8em;
  box-shadow:3px 3px 0 var(--red);
  max-width:200px;
  transform:rotate(-1.5deg);
  opacity:0;
  transition:opacity .12s var(--ease);
  will-change:left,top;
}

/* decorative scattered hash marks */
.scatter{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.scatter b{ position:absolute; font-family:var(--ff-deco); color:var(--ink); opacity:.07; user-select:none; }
.section > .wrap{ position:relative; z-index:1; }