/* ===========================================================
   wesleypip.es — "POP CHAOS"
   Y2K sticker-bomb: acid yellow / ink / hot pink / volt blue
   =========================================================== */

@font-face{
  font-family:'Bungee';
  src:url('../assets/fonts/bungee-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bungee Inline';
  src:url('../assets/fonts/bungee-inline-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* ONE loud palette, committed */
  --acid:      #EEFF00;
  --acid-deep: #C9DB00;
  --ink:       #0A0A0A;
  --hot:       #FF2E88;
  --volt:      #1B0FE0;
  --cream:     #FFFBEA;
  --paper:     #FFFFFF;

  --font-display: 'Bungee', 'Bungee Inline', fantasy, cursive;
  --font-inline:  'Bungee Inline', 'Bungee', fantasy, cursive;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --spring: cubic-bezier(.2, 1.55, .35, 1);
  --snap:   cubic-bezier(.16, .9, .3, 1);
}

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

html,body{ height:100%; }

body{
  margin:0;
  overflow:hidden;
  background-color:var(--acid);
  color:var(--ink);
  font-family:var(--font-mono);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:manipulation;

  /* layered atmosphere: glows + halftone + diagonal pinstripe on acid */
  background-image:
    radial-gradient(58vmax 58vmax at 12% 8%,  rgba(255,46,136,.34), rgba(255,46,136,0) 62%),
    radial-gradient(64vmax 64vmax at 92% 96%, rgba(27,15,224,.34),  rgba(27,15,224,0)  60%),
    radial-gradient(40vmax 40vmax at 78% 12%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%),
    radial-gradient(circle at center, rgba(10,10,10,.14) 1.4px, rgba(0,0,0,0) 1.5px),
    repeating-linear-gradient(45deg, rgba(10,10,10,.04) 0 2px, rgba(0,0,0,0) 2px 13px),
    linear-gradient(168deg, #F6FF4D 0%, var(--acid) 48%, var(--acid-deep) 100%);
  background-size:
    auto, auto, auto,
    14px 14px,
    auto,
    auto;
  background-attachment:fixed;
}

/* film grain over everything but chrome */
#grain{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:55; pointer-events:none;
  opacity:.13; mix-blend-mode:multiply;
}

.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;
}

/* ============================ STAGE ============================ */

.stage{
  position:fixed; inset:0;
  z-index:2;
  overflow:hidden;
  contain:layout paint style;
}

/* ============================ TITLE ============================ */
/* z-index 30 => stickers with depth-index >24 fly IN FRONT of the
   headline, the rest behind it. Real 2.5D. */
.titlewrap{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-2.4deg);
  z-index:30;
  pointer-events:none;
  text-align:center;
  width:min(96vw, 1180px);
  animation:title-in 1.1s var(--spring) both .12s;
}

.title{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.005em;
  font-size:clamp(3.4rem, 20vw, 15rem);
  display:flex; flex-direction:column; align-items:center;
  gap:.02em;
}
.title__line{ position:relative; display:block; }
.title__line--b{ transform:rotate(1.9deg) translateX(.02em); }

.title__main{
  position:relative;
  display:block;
  color:var(--cream);
  -webkit-text-stroke:clamp(3px,.9vw,9px) var(--ink);
  paint-order:stroke fill;
  text-shadow:
     .035em .035em 0 var(--hot),
     .07em  .07em  0 var(--volt),
     .085em .085em 0 var(--ink);
}
/* offset outline ghost = sticker layering */
.title__ghost{
  position:absolute; inset:0;
  display:block;
  color:transparent;
  font-family:var(--font-inline);
  -webkit-text-stroke:2px rgba(10,10,10,.5);
  transform:translate(-.045em,-.05em) scale(1.015);
  opacity:.55;
}

.tagline{
  margin:.55em auto 0;
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(.62rem, 1.9vw, 1.05rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--acid);
  background:var(--ink);
  padding:.5em 1em .45em 1.34em;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--hot), 5px 5px 0 2px var(--ink);
  transform:rotate(1.2deg);
}
.tagline em{ color:var(--hot); font-style:normal; }

@keyframes title-in{
  from{ opacity:0; transform:translate(-50%,-38%) rotate(-9deg) scale(.68); }
  to  { opacity:1; transform:translate(-50%,-50%) rotate(-2.4deg) scale(1); }
}

/* ============================ STICKERS ============================ */

.sticker{
  position:absolute;
  top:0; left:0;
  will-change:transform;
  transform:translate3d(-9999px,-9999px,0);
  opacity:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sticker.is-visible{ opacity:1; }

.sticker__inner{
  position:relative;
  width:100%; height:100%;
  transform:scale(1) rotate(0deg);
  transition:
    transform .46s var(--spring),
    box-shadow .3s var(--snap),
    filter .3s var(--snap);
  transform-origin:50% 50%;
}

.sticker__frame{
  position:relative;
  width:100%; height:100%;
  background:var(--paper);
  border:3px solid var(--ink);
  overflow:hidden;
  display:block;
}

.sticker img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  background:
    repeating-linear-gradient(135deg, #e9e9e9 0 8px, #e2e2e2 8px 16px);
  opacity:0;
  transition:opacity .5s ease;
}
.sticker img.is-loaded{ opacity:1; }

/* --- frame variants: same palette, four silhouettes --- */

/* A — polaroid with caption chin */
.sticker--polaroid .sticker__inner{
  background:var(--cream);
  border:3px solid var(--ink);
  padding:7% 7% 20%;
  box-shadow:7px 8px 0 var(--ink);
}
.sticker--polaroid .sticker__frame{ border-width:2px; }
.sticker--polaroid .cap{
  position:absolute; left:0; right:0; bottom:4%;
  text-align:center;
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(6px, 1.5vmin, 11px);
  letter-spacing:.14em;
  color:var(--ink);
  opacity:.72;
}

/* B — die-cut rounded sticker, hot-pink drop */
.sticker--diecut .sticker__inner{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:18px;
  padding:5%;
  box-shadow:6px 7px 0 var(--hot), 6px 7px 0 3px var(--ink);
}
.sticker--diecut .sticker__frame{
  border-radius:11px; border-width:0;
}
.sticker--diecut img{ border-radius:11px; }

/* C — volt block, offset backing plate */
.sticker--block .sticker__inner{
  background:var(--volt);
  border:3px solid var(--ink);
  padding:6% 6% 6%;
  box-shadow:8px 8px 0 var(--acid), 8px 8px 0 3px var(--ink);
}
.sticker--block .sticker__frame{ border-width:2px; }

/* D — taped snapshot */
.sticker--tape .sticker__inner{
  background:var(--cream);
  border:3px solid var(--ink);
  padding:6%;
  box-shadow:5px 6px 0 rgba(10,10,10,.85);
}
.sticker--tape .sticker__inner::before{
  content:"";
  position:absolute;
  top:-7%; left:22%;
  width:44%; height:15%;
  background:rgba(255,255,255,.72);
  border:1.5px solid rgba(10,10,10,.35);
  transform:rotate(-6deg);
  box-shadow:0 1px 0 rgba(10,10,10,.15);
}
.sticker--tape .sticker__frame{ border-width:2px; }

/* --- POP --- */
.sticker.is-pop .sticker__inner{
  transform:scale(var(--pop-scale,1.62)) rotate(var(--pop-tilt,-4deg));
  filter:saturate(1.12) contrast(1.04);
}
.sticker.is-pop.sticker--polaroid .sticker__inner,
.sticker.is-pop.sticker--tape .sticker__inner{
  box-shadow:
    0 0 0 4px var(--ink),
    14px 16px 0 var(--hot),
    14px 16px 0 4px var(--ink),
    0 26px 60px rgba(10,10,10,.42);
}
.sticker.is-pop.sticker--diecut .sticker__inner{
  box-shadow:
    0 0 0 4px var(--ink),
    12px 14px 0 var(--volt),
    12px 14px 0 4px var(--ink),
    0 26px 60px rgba(10,10,10,.42);
}
.sticker.is-pop.sticker--block .sticker__inner{
  box-shadow:
    0 0 0 4px var(--ink),
    14px 16px 0 var(--hot),
    14px 16px 0 4px var(--ink),
    0 26px 60px rgba(10,10,10,.42);
}

/* ============================ SHARE CHIP ============================ */
/* Child of the OUTER .sticker, so the rAF transform (drift + tilt) carries
   it for free and it lives inside the sticker's own hover bounds. It is a
   sibling of .sticker__inner, so the pop spring never scales it. */

.sticker__share{
  position:absolute;
  left:50%;
  /* .sticker__inner scales about its centre, so the popped chin sits at
     50% + 50%*--pop-scale of the outer box. The -10px overlap plus the
     padding below keeps this hit area TOUCHING the sticker: travelling
     from image to chip never crosses dead space, so the pop survives. */
  top:calc(50% + 50% * var(--pop-scale, 1.62) - 10px);
  padding-top:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform-origin:50% 0;
  transform:translate(-50%,-12px) scale(.5);
  transition:
    opacity .16s var(--snap),
    transform .3s var(--snap),
    visibility 0s linear .2s;
}
.sticker.is-pop .sticker__share{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
  transition:
    opacity .14s var(--snap) .07s,
    transform .46s var(--spring) .05s,
    visibility 0s;
}

.sticker__share-btn{
  display:block;
  margin:0;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:11px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--paper);
  background:var(--ink);
  border:2.5px solid var(--volt);
  box-shadow:3px 3px 0 var(--hot), 3px 3px 0 2.5px var(--ink);
  padding:.62em .74em .52em;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  transform:rotate(-1.9deg);
  transition:
    background .16s var(--snap),
    color .16s var(--snap),
    border-color .16s var(--snap),
    box-shadow .16s var(--snap),
    transform .16s var(--snap);
}
.sticker__share-btn .arw{ color:var(--acid); }
.sticker__share-btn:hover{
  background:var(--hot);
  color:var(--ink);
  border-color:var(--ink);
  box-shadow:4px 5px 0 var(--volt), 4px 5px 0 2.5px var(--ink);
  transform:rotate(-1.9deg) translate(-1px,-1px);
}
.sticker__share-btn:hover .arw{ color:var(--cream); }
.sticker__share-btn:active{
  transform:rotate(-1.9deg) translate(2px,2px);
  box-shadow:0 0 0 var(--volt), 0 0 0 2.5px var(--ink);
}
.sticker__share-btn:focus-visible{
  outline:3px solid var(--acid);
  outline-offset:3px;
}

/* ============================ TOAST ============================ */

.toast{
  position:fixed;
  left:50%; bottom:max(92px, 15vh);
  z-index:90;
  max-width:min(92vw, 30rem);
  text-align:center;
  font-family:var(--font-mono); font-weight:700;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acid);
  background:var(--ink);
  padding:.7em 1em .6em;
  border:3px solid var(--acid);
  box-shadow:5px 6px 0 var(--hot), 5px 6px 0 3px var(--ink);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,16px) rotate(-1.1deg) scale(.94);
  transition:
    opacity .18s var(--snap),
    transform .34s var(--snap),
    visibility 0s linear .2s;
}
.toast.is-up{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) rotate(-1.1deg) scale(1);
  transition:
    opacity .16s var(--snap),
    transform .44s var(--spring),
    visibility 0s;
}

/* ============================ MARQUEE ============================ */

.marquee{
  position:fixed;
  left:-6vw; width:112vw;
  z-index:60;
  overflow:hidden;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  pointer-events:none;
  font-family:var(--font-display);
  font-size:clamp(.72rem, 1.75vw, 1.15rem);
  letter-spacing:.04em;
  padding:.42em 0 .34em;
}
.marquee--top{
  top:4.6vh;
  transform:rotate(-1.7deg);
  background:var(--hot);
  color:var(--cream);
  box-shadow:0 6px 0 rgba(10,10,10,.9);
  text-shadow:2px 2px 0 var(--ink);
}
.marquee--bottom{
  bottom:8vh;
  transform:rotate(1.5deg);
  background:var(--ink);
  color:var(--acid);
  box-shadow:0 -6px 0 rgba(255,46,136,.9);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:slide 26s linear infinite;
}
.marquee__track--rev{ animation:slide-rev 31s linear infinite; }
.marquee__set{ white-space:nowrap; padding-right:1.2em; }
.marquee b{ color:var(--volt); }
.marquee--bottom b{ color:var(--hot); }

@keyframes slide     { from{transform:translate3d(0,0,0);}    to{transform:translate3d(-50%,0,0);} }
@keyframes slide-rev { from{transform:translate3d(-50%,0,0);} to{transform:translate3d(0,0,0);} }

/* ============================ HUD / FOOT ============================ */

.hud{
  position:fixed;
  left:max(14px, 2.4vw); bottom:max(14px, 2.6vh);
  z-index:62;
  display:flex; align-items:center; gap:.55em;
  font-family:var(--font-mono); font-weight:700;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
  background:var(--acid);
  padding:.55em .85em .5em;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--volt), 4px 4px 0 3px var(--ink);
  transform:rotate(-1.6deg);
  pointer-events:none;
}
.hud__dot{
  width:.55em; height:.55em; border-radius:50%;
  background:var(--hot);
  border:1.5px solid var(--ink);
  animation:blip 1.15s steps(2,end) infinite;
}
@keyframes blip{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }

.foot{
  position:fixed;
  right:max(14px, 2.4vw); bottom:max(14px, 2.6vh);
  z-index:62;
  font-family:var(--font-mono); font-weight:700;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  background:var(--cream);
  padding:.5em .7em .42em;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--hot), 3px 3px 0 2.5px var(--ink);
  pointer-events:none;
  transform:rotate(1.2deg);
}

.noscript{
  position:fixed; inset:auto 0 40% 0; z-index:80;
  text-align:center; font-family:var(--font-display);
  font-size:1.2rem; color:var(--ink);
}

/* ============================ CURSOR ============================ */

.cursor{ display:none; }

@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor *{ cursor:none !important; }
  .cursor{
    display:block;
    position:fixed; left:0; top:0;
    z-index:100; pointer-events:none;
    mix-blend-mode:normal;
  }
  .cursor__ring{
    position:fixed; left:0; top:0;
    width:38px; height:38px; margin:-19px 0 0 -19px;
    border:3px solid var(--ink);
    background:rgba(255,46,136,.18);
    transition:width .22s var(--spring), height .22s var(--spring),
               margin .22s var(--spring), background .22s var(--snap),
               border-radius .22s var(--snap);
    will-change:transform;
  }
  .cursor__dot{
    position:fixed; left:0; top:0;
    width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
    background:var(--ink);
    border-radius:50%;
    will-change:transform;
  }
  .cursor.is-hot .cursor__ring{
    width:72px; height:72px; margin:-36px 0 0 -36px;
    background:rgba(238,255,0,.28);
    border-radius:50%;
  }
}

/* ============================ RESPONSIVE ============================ */

@media (max-width:560px){
  .marquee--top{ top:3vh; }
  .marquee--bottom{ bottom:11vh; }
  .tagline{ letter-spacing:.2em; padding:.5em .7em .45em .9em; }
  .hud{ font-size:.52rem; letter-spacing:.12em; left:3vw; bottom:5.4vh; }
  .sticker__share-btn{ font-size:10px; letter-spacing:.11em; }
  .toast{ font-size:.58rem; bottom:max(104px, 17vh); }
  .foot{
    font-size:.5rem; letter-spacing:.08em;
    left:3vw; right:auto; bottom:1.4vh;
  }
}

@media (max-height:520px) and (orientation:landscape){
  .title{ font-size:clamp(2.6rem, 9vh, 6rem); }
}

/* ============================ REDUCED MOTION ============================ */

@media (prefers-reduced-motion: reduce){
  .marquee__track,
  .marquee__track--rev{ animation-duration:400s; }
  .hud__dot{ animation:none; }
  .titlewrap{ animation-duration:.01ms; }
  .sticker__inner{ transition-duration:.2s; }

  /* the chip still appears and still works — it just stops springing */
  .sticker__share,
  .sticker.is-pop .sticker__share{
    transition:none;
    transform:translate(-50%,0) scale(1);
  }
  .sticker__share-btn,
  .sticker__share-btn:hover,
  .sticker__share-btn:active{ transition:none; transform:rotate(-1.9deg); }
  .toast,
  .toast.is-up{
    transition:none;
    transform:translate(-50%,0) rotate(-1.1deg) scale(1);
  }
}