/* ==========================================================================
   FRANKLIN — comic book / 3D perspective stylesheet
   ========================================================================== */

:root{
  --ink:      #12100e;
  --paper:    #f6ecd8;
  --paper-2:  #efe0c4;
  --cream:    #fdf6e8;
  --teal:     #23474f;
  --teal-2:   #2f6069;
  --teal-dp:  #0e1e22;
  --gold:     #e8a33d;
  --gold-2:   #f6c76a;
  --red:      #e0402f;
  --pink:     #ff62a5;
  --uni:      #ff3ea5;
  --dex:      #5cc8ff;
  --tg:       #2aabee;

  --ink-shadow: 10px 10px 0 var(--ink);
  --ink-shadow-sm: 6px 6px 0 var(--ink);
  --border: 4px solid var(--ink);
  --border-fat: 6px solid var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  font-family:'Comic Neue', system-ui, sans-serif;
  font-weight:700;
  color:var(--cream);
  background:var(--teal-dp);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- BACKGROUND */
.bg-photo,
.bg-ink{
  position:fixed;
  inset:-6vmax;
  z-index:-3;
  pointer-events:none;
}

.bg-photo{
  background:url('4.png') center/cover no-repeat;
  filter:grayscale(.35) contrast(1.05) blur(3px);
  opacity:.22;
  transform:scale(1.06);
}

.bg-ink{
  z-index:-2;
  background:
    radial-gradient(120% 90% at 50% 0%,  rgba(232,163,61,.20), transparent 60%),
    radial-gradient(100% 80% at 10% 100%, rgba(35,71,79,.75), transparent 65%),
    radial-gradient(110% 90% at 90% 85%, rgba(224,64,47,.16), transparent 60%),
    linear-gradient(180deg, #0d1a1e 0%, #14262b 45%, #0b1518 100%);
}

/* halftone dot field + vignette */
.bg-dots{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(246,236,216,.14) 1.1px, transparent 1.2px);
  background-size:9px 9px;
  mask-image:radial-gradient(120% 100% at 50% 20%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 20%, #000 25%, transparent 78%);
  opacity:.9;
}
.bg-vig{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  box-shadow:inset 0 0 22vmax rgba(0,0,0,.72);
}

/* --------------------------------------------------------------- TYPOGRAPHY */
.f-anton  { font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:.02em; }
.f-bang   { font-family:'Bangers', cursive; font-weight:400; letter-spacing:.045em; }

/* comic 3D extruded wordmark */
.wordmark{
  font-family:'Anton', Impact, sans-serif;
  color:var(--cream);
  line-height:.86;
  letter-spacing:.005em;
  text-transform:uppercase;
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:
     3px  3px 0 var(--teal),
     6px  6px 0 var(--teal),
     9px  9px 0 var(--teal-dp),
    12px 12px 0 rgba(0,0,0,.55);
}

.title-burst{
  font-family:'Bangers', cursive;
  color:var(--cream);
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--red), 7px 7px 0 var(--ink);
  letter-spacing:.06em;
}

.tag-outline{
  -webkit-text-stroke:1.5px var(--ink);
  paint-order:stroke fill;
}

/* ------------------------------------------------------------------- PANELS */
.panel{
  position:relative;
  background:var(--paper);
  border:var(--border-fat);
  border-radius:2px;
  box-shadow:var(--ink-shadow);
  color:var(--ink);
}
.panel::after{      /* halftone texture inside every panel */
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(18,16,14,.16) 1px, transparent 1.1px);
  background-size:7px 7px;
  mix-blend-mode:multiply;
  opacity:.5;
}
.panel > *{ position:relative; z-index:1; }

.panel-dark{ background:var(--teal); color:var(--cream); }
.panel-gold{ background:var(--gold); color:var(--ink); }

/* ------------------------------------------------------- 3D PERSPECTIVE RIG */
.stage{ perspective:1500px; perspective-origin:50% 45%; }
.stage-tight{ perspective:1000px; }

.tilt{ transform-style:preserve-3d; will-change:transform; }

.tl-l  { transform:rotateY( 13deg) rotateX(3deg)  rotateZ(-1.6deg) translateZ(-26px); }
.tl-r  { transform:rotateY(-13deg) rotateX(3deg)  rotateZ( 1.6deg) translateZ(-26px); }
.tl-up { transform:rotateX( 10deg) rotateZ(-1deg); }
.tl-dn { transform:rotateX(-8deg)  rotateZ( 1deg); }
.tl-pop{ transform:rotateY(-7deg) rotateX(5deg) translateZ(40px); }

.hoverlift{ transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s; }
.hoverlift:hover{
  transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(60px) scale(1.015);
  box-shadow:18px 18px 0 var(--ink);
}

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(48px) rotateX(-14deg) scale(.96); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.9,.25,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.in.keep-tilt.tl-l  { transform:rotateY( 13deg) rotateX(3deg) rotateZ(-1.6deg) translateZ(-26px); }
.reveal.in.keep-tilt.tl-r  { transform:rotateY(-13deg) rotateX(3deg) rotateZ( 1.6deg) translateZ(-26px); }
.reveal.in.keep-tilt.tl-up { transform:rotateX(10deg) rotateZ(-1deg); }
.reveal.in.keep-tilt.tl-dn { transform:rotateX(-8deg) rotateZ(1deg); }
.reveal.in.keep-tilt.tl-pop{ transform:rotateY(-7deg) rotateX(5deg) translateZ(40px); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---------------------------------------------------------------- BURST TAG */
.burst{
  clip-path:polygon(50% 0%,60% 12%,74% 5%,77% 21%,92% 19%,88% 34%,100% 43%,88% 54%,97% 68%,82% 71%,83% 87%,68% 82%,61% 96%,50% 86%,39% 96%,32% 82%,17% 87%,18% 71%,3% 68%,12% 54%,0% 43%,12% 34%,8% 19%,23% 21%,26% 5%,40% 12%);
  background:var(--red);
  color:var(--cream);
  display:grid; place-items:center; text-align:center;
}

.ribbon{
  background:var(--red);
  color:var(--cream);
  border:var(--border);
  box-shadow:var(--ink-shadow-sm);
  transform:rotate(-2deg);
}

/* --------------------------------------------------------------- SPEECH BOX */
.bubble{
  position:relative;
  background:var(--cream);
  color:var(--ink);
  border:var(--border);
  border-radius:26px;
  box-shadow:var(--ink-shadow-sm);
}
.bubble::before,
.bubble::after{
  content:''; position:absolute; bottom:-26px; left:52px;
  border:14px solid transparent;
  border-top-color:var(--ink);
}
.bubble::after{
  bottom:-17px; left:56px;
  border:11px solid transparent;
  border-top-color:var(--cream);
}

/* ------------------------------------------------------------------ BUTTONS */
.btn-comic{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:'Bangers', cursive; letter-spacing:.07em;
  border:var(--border);
  box-shadow:var(--ink-shadow-sm);
  color:var(--ink);
  background:var(--gold);
  padding:.85rem 1.7rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn-comic:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink); filter:saturate(1.15); }
.btn-comic:active{ transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }
.btn-red  { background:var(--red);  color:var(--cream); }
.btn-teal { background:var(--teal-2); color:var(--cream); }
.btn-cream{ background:var(--cream); }

/* ------------------------------------------------------------------- FRAMES */
.photo-frame{
  border:var(--border-fat);
  box-shadow:var(--ink-shadow);
  background:var(--paper);
  overflow:hidden;
}
.photo-frame img{ display:block; width:100%; height:100%; object-fit:cover; }

.polaroid{
  background:var(--cream);
  border:var(--border);
  box-shadow:var(--ink-shadow-sm);
  padding:10px 10px 0;
}

/* logo starburst plate */
.logo-plate{
  position:relative;
  border-radius:50%;
  border:6px solid var(--ink);
  box-shadow:0 0 0 10px var(--gold), 14px 14px 0 rgba(18,16,14,.85);
  overflow:hidden;
  background:var(--paper);
}
.rays{
  position:absolute; inset:-40%;
  background:repeating-conic-gradient(from 0deg, rgba(246,199,106,.55) 0deg 9deg, transparent 9deg 18deg);
  animation:spin 26s linear infinite;
  z-index:-1;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .rays{ animation:none; } }

/* -------------------------------------------------------------- INK DIVIDER */
.tear{
  height:34px; width:100%;
  background:var(--ink);
  clip-path:polygon(0 0,4% 60%,8% 10%,12% 70%,17% 20%,22% 75%,27% 15%,32% 65%,37% 12%,43% 72%,48% 18%,54% 70%,59% 10%,64% 66%,69% 16%,75% 74%,80% 14%,85% 68%,90% 12%,95% 62%,100% 8%,100% 100%,0 100%);
}
.tear-up{ transform:scaleY(-1); }

/* ---------------------------------------------------------------- CA / CHART */
.ca-strip{
  display:flex; align-items:center; gap:.6rem;
  background:var(--ink); color:var(--gold-2);
  border:3px solid var(--ink);
  box-shadow:var(--ink-shadow-sm);
  border-radius:999px;
  padding:.55rem .6rem .55rem 1.2rem;
}
.ca-strip code{
  font-family:'Comic Neue',ui-monospace,monospace;
  font-weight:700; font-size:.86rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.tv{
  position:relative;
  background:var(--ink);
  border:var(--border-fat);
  box-shadow:var(--ink-shadow);
  padding:14px;
  border-radius:8px;
}
.tv iframe{
  display:block; width:100%; height:100%;
  border:0; background:#0b1013; border-radius:3px;
}

/* ------------------------------------------------------------------- TICKER */
.ticker{
  background:var(--gold);
  color:var(--ink);
  border-top:var(--border); border-bottom:var(--border);
  overflow:hidden; white-space:nowrap;
}
.ticker__track{ display:inline-flex; animation:slide 26s linear infinite; }
.ticker span{ padding:.55rem 1.1rem; font-family:'Bangers',cursive; letter-spacing:.09em; font-size:1.15rem; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ------------------------------------------------------------------ FLOATER */
.bob{ animation:bob 5.5s ease-in-out infinite; }
.bob-2{ animation:bob 7s ease-in-out infinite reverse; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@media (prefers-reduced-motion:reduce){ .bob,.bob-2{ animation:none; } }

/* -------------------------------------------------------------------- SOCIAL */
.social-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  border:var(--border); box-shadow:var(--ink-shadow-sm);
  background:var(--cream); color:var(--ink);
  padding:1.15rem .5rem; border-radius:14px;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-tile:hover{ transform:translate(-4px,-4px) rotate(-1.5deg); box-shadow:12px 12px 0 var(--ink); }
.social-tile i{ font-size:2rem; line-height:1; }
.social-tile span{ font-family:'Bangers',cursive; letter-spacing:.06em; font-size:1.05rem; }

/* ------------------------------------------------------------------ NAV */
.nav-comic{
  background:var(--paper);
  border-bottom:var(--border-fat);
  box-shadow:0 8px 0 rgba(18,16,14,.35);
}
.nav-link-comic{
  font-family:'Bangers',cursive; letter-spacing:.07em;
  color:var(--ink); text-decoration:none; padding:.25rem .1rem;
  border-bottom:3px solid transparent;
  transition:color .18s, border-color .18s, transform .18s;
  display:inline-block;
}
.nav-link-comic:hover{ color:var(--red); border-color:var(--red); transform:translateY(-2px); }

/* ------------------------------------------------------------------ HELPERS */
.step-num{
  font-family:'Anton',sans-serif;
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  color:var(--gold-2);
  line-height:.8;
}
.hr-ink{ height:5px; background:var(--ink); border:0; }

.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(140%);
  background:var(--red); color:var(--cream);
  border:var(--border); box-shadow:var(--ink-shadow-sm);
  padding:.7rem 1.4rem; border-radius:999px;
  font-family:'Bangers',cursive; letter-spacing:.07em; font-size:1.1rem;
  transition:transform .35s cubic-bezier(.2,.9,.25,1); z-index:80;
}
.toast.show{ transform:translateX(-50%) translateY(0); }

::selection{ background:var(--gold); color:var(--ink); }

/* mobile: flatten the 3D so nothing clips off-screen */
@media (max-width:1023px){
  .tl-l,.tl-r,.tl-up,.tl-dn,.tl-pop,
  .reveal.in.keep-tilt.tl-l,.reveal.in.keep-tilt.tl-r,
  .reveal.in.keep-tilt.tl-up,.reveal.in.keep-tilt.tl-dn,
  .reveal.in.keep-tilt.tl-pop{ transform:none; }
  .panel{ box-shadow:7px 7px 0 var(--ink); }
  .wordmark{ text-shadow:2px 2px 0 var(--teal),4px 4px 0 var(--teal),6px 6px 0 var(--teal-dp); -webkit-text-stroke-width:2px; }
}