/* Layout: one poster-screen. Arched wordmark + countdown up top, mascot peeking over the bottom edge in front of a striped sunset. */
:root{
  --cream:#FFF5EA; /* cream warmed with a peach undertone */
  --navy:#1B2340;
  --coral:#F04A3A;
  --magenta:#F0306A;
  --orange:#F7931E;
  --sun:#FFC93C;
  --teal:#18A497;
  --sit:#F0592A;   /* deep coral-orange */
  --stay:#E3245A;  /* rich magenta-red */
  --sip:#F7B45A;   /* soft peach-gold */
  --ice:#9FD6EC;   /* icy blue-white accents */
  --ink-soft:#4A5170;
  --display:"Bowlby One","Arial Black","Helvetica Neue",Impact,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --w: clamp(200px, min(86vw, 36.5svh), 520px); /* mascot width */
  color-scheme: light;
}
html,body{height:100%;margin:0}
body{
  background:var(--cream);color:var(--navy);font-family:var(--cond);
  min-height:100%;display:flex;flex-direction:column;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* faint paper grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:50;
  background-image:radial-gradient(rgba(27,35,64,.06) 1px,transparent 1.2px);background-size:5px 5px;mix-blend-mode:multiply}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

main{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.6svh,30px);text-align:center;position:relative;z-index:3;
  padding-block:clamp(12px,2.4svh,36px) 0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}

.eyebrow{display:flex;align-items:center;gap:.6em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(12px,1.5vw + 6px,17px);color:var(--coral)}
.eyebrow svg{width:1.1em;height:1.1em;color:var(--teal);flex:none}

.mark{margin:0;font-family:var(--display);font-weight:400;color:var(--navy);line-height:.92;letter-spacing:.01em;
  font-size:clamp(38px,min(12.2vw,12.5svh),148px);white-space:nowrap;text-align:center;
  -webkit-mask:url("../img/speckle.png") 0 0/240px 240px repeat;mask:url("../img/speckle.png") 0 0/240px 240px repeat}

.tagline{font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;
  margin:0;font-size:clamp(48px,min(16.5vw,12.5svh),150px);line-height:.92;letter-spacing:-.005em;display:flex;gap:.26em;flex-wrap:wrap;justify-content:center;min-height:1em}
.tagline span{display:inline-block}
.tagline .w{position:relative;text-shadow:.04em .045em 0 var(--navy)}
.tagline .sit{color:var(--sit)}.tagline .stay{color:var(--stay)}.tagline .sip{color:var(--sip)}
.flake{position:absolute;width:.24em;height:.24em;top:-.06em;right:-.2em;color:var(--ice);filter:drop-shadow(0 0 1px rgba(27,35,64,.35))}
.tagline .stay .flake{top:auto;bottom:.02em;right:-.16em;width:.18em;height:.18em}
.brand{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1svh,12px)}

.count{display:flex;gap:clamp(6px,1.6vw,18px);align-items:stretch;justify-content:center}
.unit{display:flex;flex-direction:column;align-items:center;min-width:clamp(62px,13vw,108px);
  padding:clamp(6px,1.2svh,12px) clamp(6px,1.4vw,14px) clamp(5px,1vh,10px);
  border:2.5px solid var(--navy);border-radius:10px;background:var(--cream);box-shadow:4px 4px 0 var(--navy)}
.num{font-weight:800;font-size:clamp(30px,min(6vw + 6px,6.4svh),74px);line-height:.95;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.lbl{font-weight:700;font-size:clamp(10px,.8vw + 7px,14px);letter-spacing:.2em;color:var(--ink-soft)}
.colon{align-self:center;font-weight:800;font-size:clamp(24px,4vw,48px);color:var(--teal);line-height:1}

.when{margin:0;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(19px,min(5.4vw,3.2svh),32px);line-height:1.1;color:var(--navy)}
.when b{color:var(--navy);font-weight:800;white-space:nowrap}

.find{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:var(--cream);background:var(--navy);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(13px,.8vw + 10px,17px);
  padding:.75em 1.3em;border-radius:999px;transition:transform .2s ease, background .2s ease}
.find svg{width:1.15em;height:1.15em;color:var(--sun)}
.find:hover{background:var(--teal);transform:translateY(-2px) rotate(-1deg)}
.find:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}

/* ---------- mascot stage ---------- */
.stage{position:relative;width:100%;height:calc(var(--w) * .70);flex:none;overflow:hidden;margin-top:clamp(4px,1svh,14px);z-index:2}
.sun{position:absolute;left:50%;bottom:calc(var(--w) * -0.66);width:calc(var(--w) * 1.32);aspect-ratio:1;max-width:none;
  transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(to bottom,var(--magenta) 0%,var(--coral) 30%,var(--orange) 52%,var(--sun) 72%);
  -webkit-mask:repeating-linear-gradient(to bottom,#000 0 calc(var(--w)*.05),transparent calc(var(--w)*.05) calc(var(--w)*.062));
          mask:repeating-linear-gradient(to bottom,#000 0 calc(var(--w)*.05),transparent calc(var(--w)*.05) calc(var(--w)*.062))}
.leaf{position:absolute;bottom:-4%;width:calc(var(--w)*.13);height:calc(var(--w)*.62);background:var(--teal);
  clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 100%}
.l1{left:calc(50% - var(--w)*.62);transform:rotate(-42deg)}
.l2{left:calc(50% - var(--w)*.55);transform:rotate(-24deg);height:calc(var(--w)*.72)}
.l3{right:calc(50% - var(--w)*.55);transform:rotate(24deg);height:calc(var(--w)*.72)}
.l4{right:calc(50% - var(--w)*.62);transform:rotate(42deg)}

.dog{position:absolute;left:50%;top:calc(var(--w) * .195);width:var(--w);margin-left:calc(var(--w) / -2);
  cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;padding:0;background:none}
.dog img{display:block;width:100%;height:auto;max-width:none;filter:drop-shadow(0 -2px 0 var(--cream)) drop-shadow(0 6px 14px rgba(27,35,64,.18));
  user-select:none;-webkit-user-drag:none}
.dog:focus-visible{outline:3px dashed var(--magenta);outline-offset:6px;border-radius:40% 40% 0 0}
/* lens glints, positioned on the cutout's lenses (image is 600×700) */
.glint{position:absolute;top:32.5%;height:14%;width:22.5%;overflow:hidden;border-radius:6% 6% 30% 30%;pointer-events:none}
.glint.left{left:31%}.glint.right{left:64.5%}
.glint::before{content:"";position:absolute;top:-20%;left:-60%;width:35%;height:140%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.bubble{position:absolute;left:calc(50% + var(--w)*.36);top:calc(var(--w)*.02);z-index:3;pointer-events:none;
  font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(13px,1vw + 9px,18px);
  background:var(--cream);border:2.5px solid var(--navy);border-radius:14px;padding:.35em .7em;opacity:0;transform:scale(.6) rotate(6deg);
  transition:opacity .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1)}
.bubble.on{opacity:1;transform:scale(1) rotate(6deg)}

/* ---------- choreography ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .sun{transform:translate(-50%,40%);opacity:0}
  .js .leaf{opacity:0}
  .js .dog{transform:translateY(105%)}
  .js .eyebrow,.js .count,.js .when,.js .find{opacity:0}
  .js .mark{opacity:0}
  .js .tagline span{opacity:0}

  .go .sun{animation:sunrise 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards}
  .go .leaf{animation:leaf .7s cubic-bezier(.3,1.5,.5,1) forwards}
  .go .l1{animation-delay:.55s}.go .l2{animation-delay:.45s}.go .l3{animation-delay:.5s}.go .l4{animation-delay:.6s}
  .go .dog{animation:peek 1.15s cubic-bezier(.25,1.25,.4,1) .7s forwards, bob 4.5s ease-in-out 2.4s infinite}
  .go .mark{animation:drop .8s cubic-bezier(.3,1.4,.5,1) .35s forwards}
  .go .eyebrow{animation:fade .6s ease .9s forwards}
  .go .count{animation:rise .7s cubic-bezier(.2,.9,.3,1.2) 1.25s forwards}
  .go .when{animation:fade .6s ease 1.5s forwards}
  .go .find{animation:rise .6s cubic-bezier(.2,.9,.3,1.2) 1.65s forwards}
  .go .glint::before{animation:glint 5s ease-in-out 2.6s infinite}
  .go .glint.right::before{animation-delay:2.75s}

  .tag-on .tagline span{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) forwards}
  .tag-on .tagline span:nth-child(2){animation-delay:.42s}
  .tag-on .tagline span:nth-child(3){animation-delay:.84s;animation-name:stampsip;animation-duration:.6s}

  .dog.hop{animation:hop .9s cubic-bezier(.3,1.3,.5,1) !important}
}
@keyframes sunrise{to{transform:translate(-50%,0);opacity:1}}
@keyframes leaf{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes peek{0%{transform:translateY(105%)}55%{transform:translateY(-4%)}75%{transform:translateY(3%)}100%{transform:translateY(0)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-2%) rotate(-1.4deg)}60%{transform:translateY(1%) rotate(1deg)}}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-24%) rotate(-3deg)}60%{transform:translateY(-20%) rotate(2deg)}100%{transform:translateY(0)}}
@keyframes drop{from{opacity:0;transform:translateY(-40px) scale(1.08)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes glint{0%,70%{left:-60%}88%,100%{left:130%}}
@keyframes stamp{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}60%{opacity:1;transform:scale(.92) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes stampsip{0%{opacity:0;transform:scale(2.8) rotate(12deg)}55%{opacity:1;transform:scale(.88) rotate(-6deg)}80%{transform:scale(1.06) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}

/* short / landscape screens: tighten so everything still fits */
@media (max-height:560px) and (orientation:landscape){
  :root{--w:clamp(180px,38svh,300px)}
  .mark{width:min(70%,620px)}
}
@media (max-width:380px){ .colon{display:none} .count{gap:6px} .unit{min-width:58px} }

/* ---------- teaser: "Something cool this way comes" ---------- */
.tease{margin:0;font-family:var(--cond);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(14px,min(4vw,2.4svh),23px);line-height:1.2;color:var(--ink-soft);text-wrap:balance}
.tease .cool{color:var(--teal);font-weight:800}
.tease .ch{display:inline-block;white-space:pre}
.tease .dots i{display:inline-block;font-style:normal}
@media (prefers-reduced-motion: no-preference){
  .js .tease .ch{opacity:0;transform:translateY(-1em) rotate(-10deg);filter:blur(3px)}
  .js .tease .dots{opacity:0}
  .tease-on .tease .ch{animation:flurry .75s cubic-bezier(.2,.9,.3,1.25) forwards;animation-delay:calc(var(--i) * 32ms)}
  .tease-on .tease .cool .ch{animation:flurry .75s cubic-bezier(.2,.9,.3,1.25) forwards, frost 3.8s ease-in-out infinite;
    animation-delay:calc(var(--i) * 32ms), calc(1.8s + var(--j) * 110ms)}
  .tease-on .tease .dots{animation:fade .4s ease 1.25s forwards}
  .tease-on .tease .dots i{animation:dot 1.5s ease-in-out 1.25s infinite}
  .tease-on .tease .dots i:nth-child(2){animation-delay:1.45s}
  .tease-on .tease .dots i:nth-child(3){animation-delay:1.65s}
}
@keyframes flurry{to{opacity:1;transform:none;filter:none}}
@keyframes frost{0%,60%,100%{color:var(--teal);text-shadow:none;transform:none}
  75%{color:var(--ice);text-shadow:0 0 .35em var(--ice),0 0 .9em rgba(159,214,236,.6);transform:translateY(-.08em)}}
@keyframes dot{0%,100%{opacity:.2}40%{opacity:1}}

/* ---------- street address under the map button ---------- */
.addr{font-style:normal;font-weight:500;letter-spacing:.05em;line-height:1.3;text-wrap:balance;max-width:none;
  font-size:clamp(14px,min(3.9vw,2.1svh),18px);color:var(--ink-soft);margin-top:calc(clamp(10px,2.6svh,30px) * -1 + 6px)}
@media (prefers-reduced-motion: no-preference){
  .js .addr{opacity:0}
  .go .addr{animation:fade .6s ease 1.85s forwards}
}