/* ============================================================
   SANDY ($SANDY) . the penguin who was saved
   A golden-hour beach. Walk down it. Send her home.
   ============================================================ */

:root{
  --sky-hi:#ffe1a4;
  --sky-lo:#ffb56a;
  --sand:#eccf94;
  --sand-hi:#f8e8c1;
  --sand-lo:#d9b16c;
  --wet:#bb9056;
  --wet-dark:#8c6838;
  --sea:#2f8c95;
  --sea-deep:#1b5d67;
  --foam:#eef5ef;
  --gold:#f0a52a;
  --gold-deep:#bd7811;
  --glow:#ffd778;
  --ink:#43301c;
  --ink-soft:#7b6038;
  --paper:#fff8ec;
  --f-display:'Patua One',Georgia,serif;
  --f-body:'Outfit',system-ui,sans-serif;
  --f-mono:'Azeret Mono',ui-monospace,monospace;
  --foot:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2028'%3E%3Cg%20fill='%23937042'%3E%3Cellipse%20cx='12'%20cy='9'%20rx='6'%20ry='7'/%3E%3Cellipse%20cx='5'%20cy='20'%20rx='3'%20ry='5'/%3E%3Cellipse%20cx='12'%20cy='23'%20rx='3'%20ry='5.5'/%3E%3Cellipse%20cx='19'%20cy='20'%20rx='3'%20ry='5'/%3E%3C/g%3E%3C/svg%3E");
}

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

body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.4) .5px,transparent .6px),
    radial-gradient(rgba(120,86,42,.16) .5px,transparent .6px);
  background-size:9px 9px,13px 13px;
  background-position:0 0,4px 6px;
  opacity:.5;
}
.beach,.sea-zone,.footer{position:relative;z-index:1;}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

img{display:block;max-width:100%;}

/* ---- hero ------------------------------------------------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,var(--sky-hi) 0%,var(--sky-lo) 46%,var(--sand) 100%);
  padding-bottom:clamp(34px,7vh,76px);
  overflow:hidden;
}
.sun{
  position:absolute;left:50%;top:58%;
  width:min(460px,80vw);height:min(460px,80vw);
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,240,196,.85),transparent 66%);
  pointer-events:none;
}
.hero-banner{
  position:relative;
  width:100%;max-height:560px;object-fit:cover;object-position:50% 46%;
  border-bottom:5px solid var(--paper);
}
.hero-intro{
  position:relative;
  max-width:620px;margin:0 auto;
  padding:clamp(28px,5vh,52px) 24px 0;
  text-align:center;
}
.ticker{
  font-family:var(--f-mono);font-weight:600;
  font-size:1.15rem;letter-spacing:.34em;
  color:var(--gold-deep);
}
.hero-line{
  margin-top:16px;
  font-size:clamp(1.05rem,2.4vw,1.32rem);
  color:var(--ink);
}
.scroll-cue{
  margin-top:26px;
  font-family:var(--f-mono);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);
}
.scroll-cue::after{
  content:"";display:block;width:26px;height:26px;margin:10px auto 0;
  background:var(--foot) no-repeat center/contain;opacity:.6;
}

/* ---- footprint trails ------------------------------------- */
.trail{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(16px,3.4vw,34px);
  padding:clamp(14px,3.4vh,34px) 0;
}
.step{
  width:24px;height:28px;flex:0 0 auto;
  background:var(--foot) no-repeat center/contain;
  opacity:.46;
}
.step:nth-child(odd){transform:translateY(-9px) rotate(-13deg);}
.step:nth-child(even){transform:translateY(9px) rotate(12deg);}
.trail-2 .step:nth-child(3){transform:translateY(0) rotate(-4deg);}

/* ---- the rescue story ------------------------------------- */
.story{
  max-width:980px;margin:0 auto;
  padding:clamp(20px,4vh,44px) clamp(20px,5vw,40px);
}
.beat{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
  margin-bottom:clamp(46px,8vh,96px);
}
.beat-rev{grid-template-columns:1fr 330px;}

.snap{
  background:var(--paper);
  padding:12px 12px 14px;
  border-radius:3px;
  box-shadow:0 22px 34px -16px rgba(67,40,15,.55);
}
.snap img{width:100%;border-radius:1px;}
.snap figcaption{
  margin-top:11px;
  font-size:.82rem;font-style:italic;color:var(--ink-soft);
  text-align:center;
}

.chapter{
  font-family:var(--f-mono);font-weight:600;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);
}
.chapter.light{color:var(--glow);}
.beat-text h2,.coin-text h2,.send h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.85rem,4vw,2.85rem);
  line-height:1.1;color:var(--ink);
  margin:10px 0 14px;
}
.beat-text p{margin-bottom:13px;font-size:1.05rem;}
.beat-text p:last-child{margin-bottom:0;}

.highlight{text-align:center;padding:14px;}
.big-quote{
  font-family:var(--f-display);
  font-size:clamp(2.6rem,7vw,4.4rem);
  line-height:1;color:var(--gold-deep);
  text-shadow:0 2px 0 rgba(255,255,255,.45);
}
.small-note{
  margin-top:12px;font-style:italic;color:var(--ink-soft);
}

/* ---- beach objects (the sockets) -------------------------- */
.object-link{
  display:flex;align-items:center;gap:18px;
  text-decoration:none;color:var(--ink);
  max-width:430px;
}
.object-words b{
  display:block;
  font-family:var(--f-display);font-weight:400;font-size:1.18rem;
}
.object-words span{
  display:block;margin-top:3px;
  font-size:.9rem;color:var(--ink-soft);
}
.object-link:hover .object-words b{color:var(--gold-deep);}
.object-link.is-sealed{opacity:.55;cursor:default;}

/* X . a rescue flag planted in the sand */
.flag-socket{
  max-width:980px;margin:0 auto clamp(40px,7vh,84px);
  padding:0 clamp(20px,5vw,40px);
  display:flex;justify-content:flex-start;
}
.flag{position:relative;width:54px;height:74px;flex:0 0 auto;}
.flag-pole{
  position:absolute;left:8px;bottom:0;width:5px;height:74px;
  background:linear-gradient(90deg,#7a5326,#a9763a 40%,#5e3f1d);
  border-radius:3px;
}
.flag-cloth{position:absolute;left:11px;top:2px;width:43px;height:30px;}
.flag-cloth svg{width:100%;height:100%;}
.flag-cloth path{fill:#e8533b;stroke:#a8341f;stroke-width:1.5;}
.flag-socket .object-link:hover .flag-cloth{transform:rotate(-5deg);transform-origin:left center;}
.flag-cloth{transition:transform .25s ease;}

/* the coin zone */
.coin-zone{
  max-width:760px;margin:0 auto;
  padding:clamp(20px,4vh,40px) clamp(20px,5vw,40px) clamp(30px,6vh,60px);
  text-align:center;
}
.medallion{
  width:min(340px,74vw);margin:0 auto clamp(22px,4vh,38px);
}
.medallion img{
  width:100%;border-radius:50%;
  box-shadow:0 22px 38px -14px rgba(67,40,15,.6);
  filter:drop-shadow(0 0 26px rgba(255,196,92,.6));
  animation:coinGlow 5.5s ease-in-out infinite;
}
@keyframes coinGlow{50%{filter:drop-shadow(0 0 42px rgba(255,210,116,.85));}}
.coin-text{max-width:520px;margin:0 auto;}
.coin-text p{margin-top:6px;font-size:1.06rem;}

/* CA traced in the wet sand */
.sand-ca{
  display:block;
  width:min(540px,94%);margin:clamp(28px,5vh,48px) auto 0;
  border:0;cursor:pointer;text-align:center;
  padding:24px 30px 22px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 42%,rgba(255,255,255,.16),transparent 70%),
    linear-gradient(165deg,var(--wet) 0%,var(--wet-dark) 100%);
  border-radius:47% 53% 45% 55% / 58% 62% 38% 42%;
  box-shadow:inset 0 6px 18px rgba(0,0,0,.32),0 10px 22px -12px rgba(67,40,15,.5);
}
.ca-label{
  display:block;
  font-size:.8rem;font-style:italic;color:#f1ddb6;
}
.ca-text{
  display:block;margin:8px 0 7px;
  font-family:var(--f-mono);font-weight:600;
  font-size:.96rem;color:var(--sand-hi);
  text-shadow:0 2px 1px rgba(0,0,0,.4),0 -1px 0 rgba(255,255,255,.18);
  word-break:break-all;line-height:1.45;
}
.ca-hint{
  display:block;
  font-size:.76rem;color:#e7cfa0;
}
.sand-ca.is-copied .ca-hint{color:#fff3d4;font-style:italic;}

/* signpost + clipping row */
.beach-objects{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(24px,5vw,52px);
  margin-top:clamp(34px,6vh,60px);
  text-align:left;
}
.signpost-socket,.clipping{flex:1 1 290px;max-width:360px;}

/* pump.fun . a hand painted wooden signpost */
.signpost{position:relative;width:62px;height:78px;flex:0 0 auto;}
.sign-post-pole{
  position:absolute;left:27px;bottom:0;width:8px;height:78px;
  background:linear-gradient(90deg,#6f4a22,#a06f37 42%,#583a1b);
  border-radius:3px;
}
.sign-board{
  position:absolute;left:0;top:12px;width:62px;height:30px;
  background:linear-gradient(180deg,#c98b46,#9c6630);
  border:2px solid #6f4a22;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 8px -3px rgba(0,0,0,.4);
}
.sign-board svg{width:34px;height:24px;}
.sign-board path{fill:none;stroke:#fff3d8;stroke-width:3;stroke-linejoin:round;}
.sign-board circle{fill:#ffe08a;stroke:#6f4a22;stroke-width:1.6;}
.signpost-socket .object-link:hover .sign-board{transform:rotate(-3deg);}
.sign-board{transition:transform .25s ease;}

/* the news clipping */
.clip-paper{
  position:relative;width:58px;height:70px;flex:0 0 auto;
  background:var(--paper);
  border:1px solid #d8c9a6;
  box-shadow:0 6px 12px -5px rgba(67,40,15,.5);
  transform:rotate(-5deg);
  padding:12px 9px;
}
.clip-line{
  display:block;height:4px;border-radius:2px;
  background:#bcae8e;margin-bottom:6px;
}
.clip-line.short{width:62%;}
.clipping .object-link:hover .clip-paper{transform:rotate(0deg);}
.clip-paper{transition:transform .25s ease;}

/* ---- the sea . send Sandy home ---------------------------- */
.sea-zone{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,
    var(--sand) 0%,
    var(--sand) 30%,
    var(--wet) 48%,
    var(--sea) 64%,
    var(--sea-deep) 100%);
  padding:clamp(50px,9vh,110px) 20px clamp(70px,12vh,150px);
  min-height:90vh;
}
.foam{
  position:absolute;left:-4%;right:-4%;top:56%;
  height:32px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 100%,var(--foam),transparent 72%);
  opacity:.6;
  animation:foamDrift 6s ease-in-out infinite;
}
@keyframes foamDrift{50%{transform:translateX(22px);}}
.tide{
  position:absolute;left:-6%;right:-6%;bottom:0;
  height:80%;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(238,245,239,0) 0%,
    rgba(238,245,239,.72) 13%,
    rgba(150,206,205,.66) 46%,
    rgba(47,140,149,.8) 100%);
  border-radius:50% 50% 0 0 / 70px 70px 0 0;
  transform:translateY(74%);
  opacity:0;
}
.tide.is-rolling{animation:tideRoll 2.9s ease-in-out;}
@keyframes tideRoll{
  0%{transform:translateY(74%);opacity:0;}
  14%{opacity:1;}
  44%{transform:translateY(-4%);opacity:.95;}
  66%{transform:translateY(18%);opacity:.86;}
  100%{transform:translateY(74%);opacity:0;}
}
.send{
  position:relative;z-index:3;
  max-width:560px;margin:0 auto;text-align:center;
}
.send h2{color:var(--ink);}
.send-lead{
  margin-bottom:24px;font-size:1.08rem;color:var(--ink);
}
.send-btn{
  font-family:var(--f-display);font-size:1.3rem;
  color:var(--ink);
  background:linear-gradient(180deg,#ffcf63,#f0a52a);
  border:0;cursor:pointer;
  padding:17px 40px;border-radius:16px;
  box-shadow:0 7px 0 var(--gold-deep),0 18px 26px -10px rgba(67,40,15,.6);
  transition:transform .1s ease,box-shadow .1s ease;
}
.send-btn:hover{transform:translateY(-2px);}
.send-btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--gold-deep),0 8px 14px -8px rgba(67,40,15,.6);}
.send-btn.is-done{
  background:linear-gradient(180deg,#bfe3df,#7fc4be);
  box-shadow:0 7px 0 #4f8f8c,0 18px 26px -10px rgba(27,93,103,.6);
}
.send-msg{
  min-height:1.4em;margin-top:22px;
  font-family:var(--f-display);font-size:1.2rem;
  color:var(--foam);
  opacity:0;transition:opacity .6s ease;
}
.send-msg.show{opacity:1;}
.send-count{
  margin-top:8px;
  font-family:var(--f-mono);font-size:.78rem;
  letter-spacing:.08em;color:rgba(255,255,255,.72);
  min-height:1.2em;
}
.prints{position:absolute;inset:0;z-index:2;pointer-events:none;}
.print{
  position:absolute;width:26px;height:30px;
  background:var(--foot) no-repeat center/contain;
  filter:brightness(.84) saturate(1.15);
  opacity:0;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.5);
  transition:opacity .45s ease,transform .5s ease;
}
.print.show{
  opacity:.92;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1);
}

/* dexscreener . a tide board by the water */
.tideboard-socket{
  position:relative;z-index:3;
  max-width:560px;margin:clamp(48px,9vh,90px) auto 0;
}
.tideboard-socket .object-link{margin:0 auto;}
.tideboard{
  position:relative;width:66px;height:60px;flex:0 0 auto;
}
.tideboard::after{
  content:"";position:absolute;left:14px;bottom:0;
  width:6px;height:20px;background:#6f4a22;border-radius:2px;
  box-shadow:32px 0 0 #6f4a22;
}
.tideboard svg{
  position:absolute;top:0;left:0;width:66px;height:48px;
}
.tideboard rect{fill:#10545c;stroke:#0c3b41;stroke-width:2;}
.tideboard polyline{fill:none;stroke:var(--glow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.tideboard line{stroke:rgba(255,255,255,.3);stroke-width:1.4;}
.tideboard-socket .object-words b{color:var(--foam);}
.tideboard-socket .object-words span{color:rgba(255,255,255,.78);}
.tideboard-socket .object-link:hover .object-words b{color:var(--glow);}

/* ---- footer ----------------------------------------------- */
.footer{
  background:var(--sea-deep);
  color:rgba(255,255,255,.8);
  text-align:center;
  padding:clamp(34px,6vh,60px) 24px clamp(40px,7vh,70px);
}
.foot-name{
  font-family:var(--f-display);font-size:1.2rem;
  color:var(--glow);
}
.foot-disc{
  max-width:600px;margin:14px auto 0;
  font-size:.82rem;line-height:1.7;
}
.foot-credit{
  margin-top:14px;
  font-family:var(--f-mono);font-size:.72rem;
  color:rgba(255,255,255,.55);
}

/* ---- toast ------------------------------------------------ */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:60;
  transform:translate(-50%,160%);
  max-width:min(380px,90vw);
  padding:13px 24px;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--gold);border-radius:12px;
  font-size:.88rem;text-align:center;
  box-shadow:0 16px 30px -12px rgba(67,40,15,.6);
  transition:transform .4s cubic-bezier(.2,.9,.25,1);
}
.toast.show{transform:translate(-50%,0);}

/* ---- responsive ------------------------------------------- */
@media (max-width:780px){
  .beat,.beat-rev{grid-template-columns:1fr;gap:26px;}
  .snap{max-width:330px;margin:0 auto;}
  .beat-rev .beat-text{order:-1;}
  .flag-socket{justify-content:center;}
  .object-link{margin:0 auto;}
}
@media (max-width:520px){
  .object-link{flex-direction:column;text-align:center;gap:12px;}
  .object-words span{font-size:.86rem;}
  .clip-paper{transform:none;}
}

/* ---- reduced motion --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}