/* components.css: reusable pieces from DESIGN_SYSTEM §4.
   Phase 1 ships: button (+variants), sticky nav, hillside letter, scroll cue.
   Phase 2 adds: awning, door, shelf card, sticker, speech bubble, road sign, marquee, cube pack, badge pill. */

/* ---- Button ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.5em 1.3em .55em;border:var(--edge);border-radius:var(--r-pill);background:var(--red);color:var(--cloud);font-family:var(--font-display);font-weight:400;font-size:1.05rem;letter-spacing:.005em;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:0 5px 0 var(--red-deep);transition:transform 120ms ease-out,box-shadow 120ms ease-out;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--red-deep)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--red-deep)}
.btn--cream{background:var(--cream);color:var(--ink);box-shadow:0 5px 0 #C9A96B}
.btn--cream:hover{box-shadow:0 3px 0 #C9A96B}
.btn--cream:active{box-shadow:0 0 0 #C9A96B}
.btn--sun{background:var(--sun);color:var(--ink);box-shadow:0 5px 0 #C89B22}
.btn--sun:hover{box-shadow:0 3px 0 #C89B22}
.btn--sun:active{box-shadow:0 0 0 #C89B22}
.btn--cloud{background:var(--cloud);color:var(--ink);border-color:var(--cloud);box-shadow:0 8px 24px rgba(20,40,10,.18)}
.btn--cloud:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(20,40,10,.22)}
.btn--cloud:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(20,40,10,.18)}

/* ---- Sticky nav (air register: transparent over the hero, white type) ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px;padding:calc(var(--s-3) + var(--sa-top)) calc(var(--gutter) + var(--sa-right)) var(--s-3) calc(var(--gutter) + var(--sa-left));color:var(--cloud);transform:translateY(calc(-100% - 16px));visibility:hidden;transition:transform 450ms cubic-bezier(.22,.8,.26,1),visibility 0s linear 450ms}
.nav.is-in{transform:none;visibility:visible;transition:transform 450ms cubic-bezier(.22,.8,.26,1),visibility 0s}
.nav__brand{font-family:var(--font-body);font-weight:800;font-size:1.25rem;letter-spacing:.01em;line-height:1;text-decoration:none;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.nav__links{display:none}
.nav__links a{font-weight:700;font-size:.95rem;line-height:1;text-decoration:none;padding:.35em 0;border-bottom:2px solid transparent;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.2);transition:border-color 150ms ease-out,opacity 150ms ease-out}
.nav__links a:hover{opacity:1;border-bottom-color:rgba(255,255,255,.75)}
.nav__cta{min-height:40px;font-size:.95rem}
@media (min-width:860px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .nav__links{display:flex;gap:var(--s-6);justify-self:center}
  .nav__cta{justify-self:end}
}
@media (max-width:479px){
  .nav{gap:var(--s-2)}
  .nav__brand{font-size:1.1rem}
  .nav__cta{font-size:.82rem;padding:.45em .85em .5em;min-height:38px}
}
@media (max-width:359px){
  .nav__brand{font-size:1rem}
}
html:not(.js) .nav,html.reduce .nav{transform:none;visibility:visible;transition:none}

/* ---- The name in the sky: air register. Nunito 800 caps with air, white, one soft shadow. ---- */
.sign{position:absolute;left:0;right:0;bottom:var(--sign-bottom,33%);z-index:5;text-align:center;transform:translateY(calc(18px * (1 - var(--e,1)))) scale(calc(.985 + .015 * var(--e,1)));transform-origin:50% 100%;opacity:1;will-change:transform,opacity}
.sign__word{font-family:var(--font-body);font-weight:800;font-size:var(--t-sign-air,clamp(2.6rem,9vw,8.5rem));line-height:1;letter-spacing:.14em;text-indent:.14em;color:var(--cloud);text-shadow:0 2px 24px rgba(10,40,90,.28),0 1px 2px rgba(10,40,90,.18)}
.sign__sub{margin-top:.55em;font-family:var(--font-script);font-weight:400;font-size:var(--t-kicker);line-height:1.15;color:var(--cloud);opacity:.92;text-shadow:0 1px 12px rgba(10,40,90,.3)}
@media (max-width:699px){.gate__stage{--sign-bottom:36%}}

/* ---- Scroll cue ---- */
.gate__cue{position:absolute;left:50%;bottom:calc(var(--s-6) + var(--sa-bottom));z-index:7;display:flex;align-items:center;gap:.5em;transform:translateX(-50%);font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;line-height:1;color:var(--cloud);opacity:var(--cue-alpha,1);text-shadow:0 1px 3px rgba(0,0,0,.35)}
.gate__cue svg{width:14px;height:14px;animation:cue-bob 1.8s ease-in-out infinite;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.gate__cue path{fill:none;stroke:var(--cloud);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
@keyframes cue-bob{50%{transform:translateY(3px)}}