/* Punta Base, Coming soon. Tokens match ../landing and ../puntaflow. Light only: the scene is direct sun. */
@font-face{font-family:Montserrat;src:url(assets/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --navy:#0B384F; --navy-deep:#082A3B; --cream:#F5F0E4; --sand:#E4DAC8;
  --clay:#B8593A; --clay-deep:#9E4A2F; --ink-2:#2C5266;
  --r:2px; --tap:48px;
  --f-d:Montserrat,system-ui,sans-serif; --f-b:Barlow,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--cream);color:var(--navy);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(184,89,58,.22)}
body{margin:0;min-height:100vh;min-height:100svh;font:400 18px/1.45 var(--f-b);background:var(--cream)}
::selection{background:var(--navy);color:var(--cream)}
a{color:inherit}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:0 0 max(32px,calc(env(safe-area-inset-bottom) + 16px));overflow:hidden}

.lang{position:absolute;z-index:3;top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right));
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-width:var(--tap);min-height:var(--tap);padding:0 14px;
  font:500 .9rem/1 var(--f-b);letter-spacing:.14em;color:var(--ink-2);text-decoration:none}
.lang b{font-weight:700;color:var(--navy)}
.lang i{font-style:normal;opacity:.5}
.lang:not(:hover) span{text-decoration:none}
.lang:hover{color:var(--navy);text-decoration:underline;text-underline-offset:.35em}

/* ---------- art ---------- */
.art-box{position:relative;flex:1 1 auto;display:flex;flex-direction:column;width:100%;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;--rx:50%;--ry:30%}
.art{display:block;width:100%;color:var(--navy);overflow:hidden}
.art-badge{flex:1 1 0;min-height:11rem;max-height:30svh;margin-top:max(22px,calc(env(safe-area-inset-top) + 12px))}
.art-strip{flex:none;height:clamp(9rem,26vh,calc(100vw * 1117 / 1800));height:clamp(9rem,26svh,calc(100vw * 1117 / 1800));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 84%,transparent 100%)}
.art-wide{display:none}
.ink{fill:currentColor}
.art-defs{pointer-events:none}

/* scene layers: parallax wrapper (JS sets --px/--py) around an idle animation */
.px{transform:translate(calc(var(--px,0) * var(--dx,0px)),calc(var(--py,0) * var(--dy,0px)))}

/* the beach is still; the sky and the water breathe */
.tide{transform-origin:0 0;animation:tide 9s ease-in-out infinite alternate}
@keyframes tide{
  from{transform:translate(4251px,700px) rotate(-.5deg) scale(1) translate(-4251px,-700px)}
  to{transform:translate(4251px,700px) rotate(.5deg) scale(1.012) translate(-4251px,-700px)}
}
.sea{animation:slide var(--dur,15s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes slide{from{transform:translateX(calc(var(--dx) * -1))}to{transform:translateX(var(--dx))}}
.swell{animation:swell 13s ease-in-out infinite alternate}
@keyframes swell{from{transform:translate(-6px,2px)}to{transform:translate(7px,-2px)}}
.glow{animation:glow 15s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.55;transform:translateX(-60px)}to{opacity:1;transform:translateX(70px)}}
.sun{animation:sun 14s ease-in-out infinite alternate}
@keyframes sun{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
.halo{transform-origin:0 0;opacity:0;animation:halo 9s ease-out 1.5s infinite}
@keyframes halo{
  0%{opacity:0;transform:translate(1830px,900px) scale(1) translate(-1830px,-900px)}
  18%{opacity:.3}
  100%{opacity:0;transform:translate(1830px,900px) scale(1.6) translate(-1830px,-900px)}
}
.cloud{animation:cloud var(--dur,80s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes cloud{
  from{transform:translateX(calc(var(--dx) * -1));opacity:.25}
  50%{opacity:.85}
  to{transform:translateX(var(--dx));opacity:.25}
}
.bird{animation:drift var(--dur,40s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes drift{to{transform:translate(var(--dx),var(--dy))}}
.flap{transform-origin:0 0;animation:flap var(--fdur,5.5s) ease-in-out var(--fdelay,0s) infinite}
@keyframes flap{
  0%,72%,100%{transform:translate(var(--ox),var(--oy)) scale(1,1) translate(calc(var(--ox) * -1),calc(var(--oy) * -1))}
  80%{transform:translate(var(--ox),var(--oy)) scale(1,.62) translate(calc(var(--ox) * -1),calc(var(--oy) * -1))}
  88%{transform:translate(var(--ox),var(--oy)) scale(1,1.08) translate(calc(var(--ox) * -1),calc(var(--oy) * -1))}
}
.paused .art-defs *,.paused .art *{animation-play-state:paused!important}

/* ink reveal: a drop of ink spreading from the badge (only when the browser can animate --reveal) */
.reveal .art-box{
  -webkit-mask-image:radial-gradient(circle farthest-corner at var(--rx) var(--ry),#000 calc(var(--reveal) - 16%),transparent var(--reveal));
  mask-image:radial-gradient(circle farthest-corner at var(--rx) var(--ry),#000 calc(var(--reveal) - 16%),transparent var(--reveal));
  animation:reveal 3.2s cubic-bezier(.45,.05,.25,1) .2s both}
@keyframes reveal{from{--reveal:0%}to{--reveal:150%}}
.reveal .art-box.done{-webkit-mask-image:none;mask-image:none;animation:none}
.reveal .copy{animation:rise .9s var(--ease) 1.9s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- copy ---------- */
.copy{flex:none;width:100%;max-width:30rem;margin:0 auto;padding:10px var(--gut) 0;text-align:center}
h1{margin:0;font:700 clamp(1.7rem,7.4vw,2.6rem)/1.1 var(--f-d);letter-spacing:-.01em;text-wrap:balance}
.lede{margin:.7rem 0 1.3rem;color:var(--ink-2);text-wrap:balance}
.stamp{display:block;margin-bottom:.2rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.875rem;color:var(--clay-deep)}
.actions{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:22.5rem}
.actions .primary{grid-column:1/-1}
.btn{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--tap);padding:0 1rem;
  border:2px solid var(--navy);border-radius:var(--r);background:transparent;color:var(--navy);
  font:600 1rem/1 var(--f-b);text-decoration:none;transition:background-color .2s,color .2s,transform .12s}
.btn svg.fill{fill:currentColor;stroke:none}
.btn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{background:var(--navy);color:var(--cream)}
.btn:active{transform:translateY(1px)}
.btn-primary{min-height:56px;background:var(--clay-deep);border-color:var(--clay-deep);color:#fff;font-size:1.125rem}
.btn-primary:hover{background:#84402A;border-color:#84402A;color:#fff}

/* ---------- wide: the panorama runs along the bottom ---------- */
@media (min-width:900px) and (orientation:landscape){
  .stage{justify-content:space-between}
  .art-box{order:2;flex:none;display:block;touch-action:auto;--ry:46%}
  .art-badge,.art-strip{display:none}
  .art-wide{display:block;height:auto;aspect-ratio:8504/1417;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5.5%);mask-image:linear-gradient(to bottom,transparent 0,#000 5.5%)}
  .copy{order:1;margin:auto auto 0;padding:clamp(56px,9vh,110px) var(--gut) clamp(40px,9vh,110px);max-width:44rem}
  h1{font-size:clamp(2.6rem,5vw,4.4rem)}
  .lede{font-size:clamp(1.125rem,1.5vw,1.375rem);margin-bottom:1.6rem}
  .actions{display:flex;flex-wrap:wrap;justify-content:center;max-width:none}
  .actions li{flex:none}
  .btn{padding:0 1.35rem}
  .btn-primary{padding:0 1.7rem}
}

@media (prefers-reduced-motion:reduce){
  .art-defs *,.art *{animation:none!important}
  .px{transform:none}
  .reveal .art-box,.reveal .copy{animation:none;-webkit-mask-image:none;mask-image:none}
  .btn{transition:none}
}