/* vesperia.io/ — the entry point: one screen, no scroll, four ways in.
   Travel links to /travel; the other three are coming soon. */
:root{
  --paper:#f4efe4;--ink:#211b12;--body:#4a453d;--label:#6b6153;
  --teal:#12292e;--teal-ink:#eef2f1;--accent:#0f6b60;--accent-hover:#0d5c53;--on-accent:#f2fbf9;
  --gap:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.home{height:100vh;height:100svh;min-height:520px;display:grid;grid-template-rows:auto auto 1fr auto;padding:0 16px env(safe-area-inset-bottom)}

.top{display:flex;align-items:center;gap:16px;padding:14px 4px 0}
.brand{font-size:19px;font-weight:700;letter-spacing:-.03em}
.top-links{margin-left:auto;display:flex;align-items:center;gap:18px}
.top-cta{background:var(--teal);color:var(--teal-ink);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600}
.top-cta:hover{background:var(--accent);color:#fff}

.intro{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding:clamp(14px,3vh,34px) 4px clamp(12px,2.4vh,26px)}
.intro h1{margin:0;font-size:clamp(28px,3.6vw,52px);font-weight:600;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.intro p{margin:0;font-size:clamp(15px,1.2vw,17px);color:var(--body)}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);min-height:0}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:22px;overflow:hidden;color:#fff;min-height:0;isolation:isolate}
.scene{position:absolute;inset:0;width:100%;height:100%;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 65%)}
.tile-body{display:grid;gap:6px;padding:clamp(16px,2vw,26px)}
.tile-t{font-size:clamp(24px,2.6vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1}
.tile-line{font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.4;color:rgba(255,255,255,.86);text-wrap:pretty}
.tile-cta{justify-self:start;margin-top:8px;display:inline-flex;gap:8px;align-items:center;background:#f4efe4;color:var(--ink);border-radius:999px;padding:10px 16px;font-size:14.5px;font-weight:600;transition:background .2s,color .2s}
.tile-soon{justify-self:start;margin-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid rgba(255,255,255,.45);color:rgba(255,255,255,.9);border-radius:999px;padding:6px 11px}
.tile.is-live:hover .scene,.tile.is-live:focus-visible .scene{transform:scale(1.05)}
.tile.is-live:hover .tile-cta{background:var(--accent);color:#fff}
.tile:not(.is-live) .scene{filter:saturate(.85)}

.foot{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding:12px 4px 14px;font-size:13px;color:var(--label)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}

/* phones: 2 × 2, still one screen */
@media (max-width:760px){
  .tiles{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .tile{border-radius:18px}
  .tile-body{padding:14px}
  .tile-t{font-size:22px}
  .tile-line{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tile-cta{padding:7px 12px;font-size:13px}
  .tile-soon{font-size:10px;padding:5px 9px}
  .intro{flex-direction:column;align-items:flex-start}
  .foot{font-size:12px}
  .foot > span:first-child{display:none}
  .scrim{background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 70%)}
  .foot-links a[href^="mailto"]{display:none}
}
@media (max-height:600px) and (max-width:760px){.tile-line{display:none}}

/* ---------- scene animation ---------- */
.scene *{transform-box:fill-box}
@keyframes draw{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes fade{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}15%{opacity:.95}100%{transform:translateY(-300px) scale(1.15);opacity:0}}
@keyframes flick{0%,100%{transform:scaleY(1) skewX(0)}30%{transform:scaleY(.86) skewX(4deg)}60%{transform:scaleY(1.06) skewX(-3deg)}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes sunrise{from{transform:translateY(40px)}to{transform:translateY(-30px)}}
@keyframes win{0%,100%{opacity:.12}35%,75%{opacity:1}}
@keyframes drift{from{transform:translateX(-80px)}to{transform:translateX(480px)}}
@keyframes chart{0%{stroke-dashoffset:460}60%,100%{stroke-dashoffset:0}}

/* travel: the route draws itself while the plane flies it (animateMotion, same 6 s) */
.route-draw{stroke-dasharray:520;animation:draw 6s linear infinite}
.ring{transform-origin:center;animation:ring 2.4s ease-out infinite}
.ring.late{animation-delay:1.2s}
.cities text{animation:fade 5s ease-in-out infinite}
.cities text:nth-child(2){animation-delay:1.6s}.cities text:nth-child(3){animation-delay:3.2s}

/* dating */
.bulbs circle{animation:twinkle 2.8s ease-in-out infinite}
.bulbs circle:nth-child(3n+1){animation-delay:.9s}.bulbs circle:nth-child(3n+2){animation-delay:1.8s}
.heart{transform-origin:center;opacity:0;animation:rise 8s ease-in infinite}
.hearts .heart:nth-child(2){animation-delay:1.6s}.hearts .heart:nth-child(3){animation-delay:3.2s}
.hearts .heart:nth-child(4){animation-delay:4.8s}.hearts .heart:nth-child(5){animation-delay:6.4s}
.flame{transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite}
.glow{animation:breathe 3s ease-in-out infinite}

/* missionary */
.sun{animation:sunrise 16s ease-in-out infinite alternate}
.wins rect{animation:win 7s ease-in-out infinite}
.wins rect:nth-child(5n+1){animation-delay:1.2s}.wins rect:nth-child(5n+2){animation-delay:2.6s}
.wins rect:nth-child(5n+3){animation-delay:3.9s}.wins rect:nth-child(5n+4){animation-delay:5.2s}
.door{animation:breathe 4s ease-in-out infinite}
.bird{animation:drift 22s linear infinite}
.bird:nth-child(2){animation-delay:-7s}.bird:nth-child(3){animation-delay:-14s}

/* business */
.chart{stroke-dasharray:460;animation:chart 7s ease-out infinite}
.owins rect{animation:win 9s ease-in-out infinite}
.owins rect:nth-child(4n+1){animation-delay:2s}.owins rect:nth-child(4n+2){animation-delay:4.5s}.owins rect:nth-child(4n+3){animation-delay:6.5s}
.owins rect:nth-child(7n){animation-duration:5s}

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