:root{--green:#adcc54;--blue:#6389f5;--yellow:#f2b743;--orange:#e47f48;--ink:#28153e;--night:#090a0f;--paper:#fffaf0;--red:#e84c4f}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
body{overflow:hidden;background:var(--night);font-family:"Nunito",sans-serif}
.moved-world{position:relative;display:grid;place-items:center;width:100%;min-height:100svh;isolation:isolate;overflow:hidden;background:var(--night)}
.tril-shape{position:absolute;z-index:-2;left:calc(50% - 205px);top:50%;width:min(860px,82vh,68vw);aspect-ratio:1;translate:-50% -50%;border-radius:43%;background:var(--green);box-shadow:0 60px 140px rgba(0,0,0,.38);animation:colour-cycle 8s steps(1) infinite}
@keyframes colour-cycle{0%,24%{background:var(--green)}25%,49%{background:var(--blue)}50%,74%{background:var(--yellow)}75%,100%{background:var(--orange)}}
.tril-brand{position:absolute;z-index:-1;left:calc(50% + 290px);top:50%;width:340px;translate:0 -50%}
.tril-brand img{display:block;width:100%;height:auto}

.postcard{position:relative;width:min(780px,76vw);aspect-ratio:1.62;padding:clamp(48px,6vw,78px);overflow:hidden;color:var(--ink);background:var(--paper);box-shadow:0 40px 100px rgba(0,0,0,.5),0 5px 0 rgba(40,21,62,.2);rotate:-5deg;cursor:pointer;animation:postcard-arrival 1.25s cubic-bezier(.16,.88,.22,1.15) both;transition:rotate .3s ease,translate .3s ease,box-shadow .3s ease}
.postcard:hover{rotate:-2deg;translate:0 -9px;box-shadow:0 52px 120px rgba(0,0,0,.56),0 5px 0 rgba(40,21,62,.2)}
@keyframes postcard-arrival{0%{opacity:0;translate:115vw -75vh;rotate:24deg;scale:.6}68%{opacity:1;translate:-22px 12px;rotate:-7deg;scale:1.03}84%{translate:9px -5px;rotate:-4deg;scale:.99}100%{translate:0 0;rotate:-5deg;scale:1}}
.airmail-frame{position:absolute;inset:0;border:15px solid transparent;background:repeating-linear-gradient(135deg,var(--red) 0 27px,var(--paper) 27px 39px,var(--blue) 39px 66px,var(--paper) 66px 78px) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.card-copy{position:absolute;left:9%;top:50%;width:72%;translate:0 -51%}
.eyebrow{margin:0 0 8px;color:var(--red);font-family:"DM Mono",monospace;font-size:clamp(10px,1.1vw,14px);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
h1{margin:0;font-family:"Fredoka",sans-serif;font-size:clamp(62px,9vw,126px);font-weight:700;line-height:.72;letter-spacing:-.065em;text-transform:uppercase}
h1 span{display:block;margin-left:8%;color:var(--blue);font-size:.48em;line-height:1.05;letter-spacing:.02em}
.scribble{display:block;width:74%;height:9px;margin:25px 0 17px 3%;rotate:-2deg;border-radius:999px;background:var(--yellow)}
.card-copy .visit-now{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 12px;border-radius:999px;background:var(--ink);color:#fff;font-family:"Fredoka",sans-serif;line-height:1;text-decoration:none;box-shadow:7px 7px 0 var(--orange);transition:translate .2s ease,box-shadow .2s ease;animation:cta-nudge 1.8s ease-in-out 1.35s infinite}
.visit-now small{padding:5px 7px;border-radius:999px;background:var(--yellow);color:var(--ink);font-family:"DM Mono",monospace;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.visit-now strong{font-size:clamp(23px,2.8vw,39px);font-weight:600;letter-spacing:-.035em}
.visit-now span{color:var(--yellow);font-size:25px}
.card-copy .visit-now:hover{translate:3px 3px;box-shadow:4px 4px 0 var(--orange);animation-play-state:paused}
@keyframes cta-nudge{0%,78%,100%{transform:scale(1)}86%{transform:scale(1.035)}92%{transform:scale(.99)}}
.stamp{position:absolute;right:7%;top:9%;display:grid;place-items:center;width:76px;aspect-ratio:.82;border:5px dotted var(--paper);outline:2px solid var(--blue);background:var(--blue);color:#fff;rotate:4deg;font-family:"Fredoka",sans-serif;line-height:1}
.stamp strong{font-size:17px}.stamp span{font-size:29px;font-weight:700}
.postmark{position:absolute;z-index:2;right:16%;top:18%;display:flex;flex-direction:column;align-items:center;width:150px;height:92px;padding-top:12px;border:3px solid rgba(40,21,62,.34);border-radius:50%;color:rgba(40,21,62,.5);rotate:-11deg;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.08em}
.postmark i{display:block;width:172px;height:2px;margin-top:5px;background:rgba(40,21,62,.3)}
.postmark small{margin-top:5px;font-size:8px}
.card-foot{position:absolute;right:7%;bottom:7%;margin:0;color:rgba(40,21,62,.58);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;writing-mode:vertical-rl}
.countdown{position:absolute;left:8%;bottom:7%;display:flex;align-items:center;gap:7px;color:var(--ink);font-family:"DM Mono",monospace;text-transform:uppercase}
.countdown em{width:66px;font-size:8px;font-style:normal;font-weight:700;line-height:1.25;letter-spacing:.1em}
.countdown span{display:grid;place-items:center;width:46px;aspect-ratio:1;border:3px solid var(--red);border-radius:50%;background:var(--paper);color:var(--red);font-family:"Fredoka",sans-serif;font-size:24px;font-weight:700;line-height:1;box-shadow:4px 4px 0 var(--yellow)}
.countdown small{font-size:9px;font-weight:700;letter-spacing:.12em}
.hint{position:absolute;left:50%;bottom:24px;margin:0;translate:-50% 0;color:rgba(255,255,255,.6);font-size:12px;font-weight:700;letter-spacing:.04em}.hint span{color:#fff}

@media(max-width:900px){
  .tril-shape{left:50%;width:min(820px,92vw,84vh)}
  .tril-brand{z-index:1;left:auto;right:22px;top:20px;width:210px;translate:0 0}
  .postcard{width:min(720px,88vw)}
}
@media(max-width:600px){
  body{overflow:auto}
  .moved-world{min-height:100svh;padding:100px 0 72px}
  .tril-shape{top:53%;width:145vw}
  .tril-brand{right:16px;top:16px;width:165px}
  .postcard{width:88vw;aspect-ratio:.76;padding:46px 35px;rotate:-3deg}
  .postcard:hover{rotate:-1deg}
  .airmail-frame{border-width:11px}
  .card-copy{left:10%;top:51%;width:80%}
  .eyebrow{font-size:10px}
  h1{font-size:clamp(60px,21vw,90px);line-height:.78}
  h1 span{font-size:.5em}
  .scribble{width:86%;margin-top:25px}
  .card-copy .visit-now{gap:7px;padding:10px 13px 11px}.visit-now strong{font-size:clamp(22px,7vw,31px)}.visit-now small{font-size:8px}.visit-now span{font-size:21px}
  .stamp{right:9%;top:7%;width:61px}
  .stamp strong{font-size:13px}.stamp span{font-size:23px}
  .postmark{right:17%;top:15%;scale:.72}
  .card-foot{right:8%;bottom:6%;font-size:9px}
  .countdown{left:10%;bottom:6%}.countdown em{display:none}.countdown span{width:42px;font-size:21px}
  .hint{bottom:17px;width:100%;text-align:center}
}
@media(max-height:620px) and (min-width:601px){
  .postcard{width:min(700px,72vw,118vh)}
  .tril-brand{top:15px;right:20px;left:auto;width:180px;translate:0 0}
  .hint{display:none}
}
@media(prefers-reduced-motion:reduce){.tril-shape,.postcard{animation:none}.postcard{rotate:-5deg}}