/* Aqua'Ora sea portal — additive layer; original site styles remain intact. */
.hero-artwork {
  position:absolute;
  inset:0;
  isolation:isolate;
  pointer-events:none;
}
.hero-artwork .hero-image { z-index:0; pointer-events:none; }
.portal-enter {
  --button-size:clamp(70px,7.5vw,96px);
  position:absolute;
  top:56%;
  left:50%;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:var(--button-size);
  height:var(--button-size);
  padding:8px;
  border:1px solid rgba(255,255,255,.87);
  border-radius:50%;
  color:#fff;
  background:radial-gradient(circle at 33% 25%,rgba(202,253,255,.58),rgba(5,117,158,.79) 48%,rgba(2,51,98,.88) 100%);
  box-shadow:0 0 0 5px rgba(229,255,255,.29),0 0 0 12px rgba(153,235,246,.20),0 14px 36px rgba(0,43,76,.30),inset 0 2px 12px rgba(255,255,255,.38);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  text-shadow:0 1px 4px rgba(0,34,58,.9);
  transform:translate(-50%,-50%);
  transition:transform .35s ease,box-shadow .35s ease;
  cursor:pointer;
  pointer-events:auto;
  animation:portal-breathe 3.4s ease-in-out infinite;
}
.portal-enter::before,.portal-enter::after {
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid rgba(244,255,255,.57);
  border-radius:50%;
  animation:portal-ripple 3.4s ease-out infinite;
  pointer-events:none;
}
.portal-enter::after{animation-delay:1.7s;}
.portal-enter:hover,.portal-enter:focus-visible{
  animation-play-state:paused;
  transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 0 7px rgba(232,255,255,.43),0 0 0 19px rgba(153,235,246,.22),0 19px 44px rgba(0,42,79,.4),inset 0 2px 16px rgba(255,255,255,.55);
}
.portal-enter:focus-visible {outline:3px solid #ffe5a2;outline-offset:7px;}
.portal-enter-title{font:400 clamp(16px,1.7vw,21px)/1.05 'Italiana',Georgia,serif;}
@keyframes portal-ripple {
  0%{opacity:.8;transform:scale(.83);}
  75%,100%{opacity:0;transform:scale(1.32);}
}
@keyframes portal-breathe {
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.16);}
}
/* The temporary second screen is deliberately NOT a final menu design. */
.portal-demo{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  padding:110px 22px 70px;
  text-align:center;
  color:#eefcff;
  background:
    radial-gradient(ellipse at 45% 26%,rgba(143,231,252,.58),transparent 38%),
    linear-gradient(145deg,#063e74 0%,#117cad 48%,#042e61 100%);
}
.portal-demo::before{
  content:"";
  position:absolute;inset:-10%;
  z-index:-2;
  background:url('assets/blue-spiral.webp') 60% 45%/min(85vw,960px) auto no-repeat,
             url('assets/blue-watercolor.webp') center/cover no-repeat;
  opacity:.3;mix-blend-mode:screen;
}
.portal-demo::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 48%,rgba(5,56,105,.03),rgba(2,24,55,.35) 75%);
}
.portal-demo-panel{
  width:min(750px,100%);
  padding:clamp(30px,7vw,75px);
  border:1px solid rgba(221,250,255,.52);
  border-radius:34px;
  background:rgba(8,62,104,.36);
  box-shadow:0 30px 95px rgba(0,23,56,.28),inset 0 1px 20px rgba(255,255,255,.09);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.portal-demo-kicker{font:600 11px 'DM Sans',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#d4f8ff;}
.portal-demo h2{font:400 clamp(56px,10vw,115px)/1.03 'Caveat',cursive;margin:16px 0 8px;color:#fff;}
.portal-demo-subtitle{font:400 clamp(24px,3.2vw,38px)/1.15 'Italiana',Georgia,serif;margin:0 0 30px;}
.portal-demo-description{max-width:420px;margin:0 auto 28px;line-height:1.7;color:#e4f6fc;}
.portal-demo-tag{display:inline-block;padding:7px 20px;border:1px solid rgba(216,246,252,.65);border-radius:100px;color:#ecf9fb;font-size:10px;text-transform:uppercase;letter-spacing:.18em;}
.portal-demo-return{display:block;width:max-content;margin:32px auto 0;padding:10px 3px;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.65);font-weight:500;font-size:13px;}
.portal-demo-return:hover{border-color:#fff;}
/* The image stays visible until the spiraling water opens at the pressed button. */
.sea-transition{
  --portal-x:50vw;--portal-y:50vh;
  position:fixed;inset:0;z-index:100;
  opacity:0;visibility:hidden;
  overflow:hidden;pointer-events:none;
}
.sea-transition.is-active{visibility:visible;opacity:1;}
.sea-transition.is-active.is-revealing{opacity:0;transition:opacity .624s ease;}
.sea-transition-wash{
  position:absolute;inset:0;opacity:0;
  background:radial-gradient(circle at var(--portal-x) var(--portal-y),rgba(7,129,161,.03) 0%,rgba(7,70,107,.64) 43%,rgba(1,22,52,.89) 100%);
}
.sea-transition.is-active .sea-transition-wash{animation:sea-darken 1.44s ease forwards;}
.sea-vortex{
  position:absolute;
  top:var(--portal-y);left:var(--portal-x);
  width:clamp(180px,21vw,360px);height:clamp(180px,21vw,360px);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.07) rotate(0deg);
  filter:drop-shadow(0 0 20px rgba(215,253,255,.8));
}
.sea-transition.is-active .sea-vortex{animation:sea-open 1.8s cubic-bezier(.17,.68,.18,1) forwards;}
.sea-vortex-waves,.sea-vortex-waves::before,.sea-vortex-waves::after{
  position:absolute;inset:0;border-radius:50%;
}
.sea-vortex-waves{
  background:repeating-conic-gradient(from 0deg,rgba(215,253,255,.95) 0deg,rgba(86,209,237,.94) 12deg,rgba(0,84,153,.88) 28deg,rgba(2,28,83,.97) 41deg,rgba(215,253,255,.95) 58deg);
  -webkit-mask:radial-gradient(circle,transparent 0 10%,black 27% 74%,transparent 92%);
  mask:radial-gradient(circle,transparent 0 10%,black 27% 74%,transparent 92%);
  animation:sea-spin .96s linear infinite;
}
.sea-vortex-waves::before{
  content:"";inset:10%;
  border:12px dotted rgba(243,254,255,.8);
  box-shadow:0 0 26px 14px rgba(178,245,252,.38);
}
.sea-vortex-waves::after{
  content:"";inset:17%;
  background:repeating-conic-gradient(from 70deg,transparent 0deg,rgba(249,255,255,.78) 12deg,transparent 20deg,rgba(0,157,206,.7) 48deg,transparent 62deg);
  animation:sea-spin-reverse 1.56s linear infinite;
}
.sea-vortex-core{
  position:absolute;inset:24%;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#e1fbff 0%,#87deec 9%,#0583bb 28%,#003e79 49%,#001b42 78%,#00122c 100%);
  box-shadow:0 0 18px 10px rgba(206,248,255,.6),inset 0 0 28px 10px rgba(1,17,59,.6);
}
.sea-vortex-core::after{
  content:"";position:absolute;inset:18%;border-radius:50%;
  border:5px solid rgba(207,252,255,.45);
  box-shadow:0 0 16px #edfcff88;
}
@keyframes sea-darken{0%{opacity:0}40%,100%{opacity:1}}
@keyframes sea-open {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.07) rotate(0deg);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(.6) rotate(-65deg);}
  58%{opacity:1;transform:translate(-50%,-50%) scale(4) rotate(-175deg);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(24) rotate(-300deg);}
}
@keyframes sea-spin{to{transform:rotate(360deg)}}
@keyframes sea-spin-reverse{to{transform:rotate(-360deg)}}
@media(max-width:850px) and (orientation:portrait){
  .hero-artwork{
    position:relative;inset:auto;
    display:block;
    width:100%;
    flex:0 1 auto;
  }
  .hero-artwork .hero-image{
    position:relative;inset:auto;
    display:block;width:100%;height:auto;
    max-height:calc(100dvh - 260px);
    object-fit:contain;
  }
  .portal-enter{
    --button-size:clamp(56px,16vw,72px);
    top:56%;left:50%;padding:6px;
  }
  .portal-enter-title{font-size:clamp(14px,4vw,18px);}
  .portal-enter::before,.portal-enter::after{inset:-8px;}
}
@media(max-height:540px) and (orientation:landscape){
  .portal-enter{--button-size:68px;top:56%;left:50%;}
  .portal-enter-title{font-size:16px;}
  .portal-demo{padding-top:70px;}
}
@media(prefers-reduced-motion:reduce){
  .portal-enter,.portal-enter::before,.portal-enter::after,
  .sea-transition *, .sea-transition *::before,.sea-transition *::after{animation:none!important;transition:none!important;}
}
html.portal-jumping{scroll-behavior:auto!important;scroll-snap-type:none!important;}

/* Horizontally centered on the original uncropped hero artwork, with the
   glass button lowered to 56% to stay completely below the embedded title. */
.portal-enter {
  top:56%;
  left:50%;
  background:linear-gradient(135deg,
    rgba(246,255,255,.37) 0%,
    rgba(126,223,244,.24) 35%,
    rgba(24,126,164,.31) 72%,
    rgba(11,72,116,.40) 100%);
  border:1px solid rgba(253,255,255,.92);
  box-shadow:
    inset 0 2px 7px rgba(255,255,255,.50),
    inset 0 -5px 14px rgba(0,69,118,.17),
    0 0 0 5px rgba(235,255,255,.22),
    0 0 0 12px rgba(167,239,252,.13),
    0 8px 26px rgba(0,41,76,.20);
  backdrop-filter:blur(11px) saturate(1.55);
  -webkit-backdrop-filter:blur(11px) saturate(1.55);
}
.portal-enter::before,.portal-enter::after {
  border-color:rgba(247,255,255,.67);
  box-shadow:0 0 11px rgba(202,252,255,.30);
}
.portal-enter:hover,.portal-enter:focus-visible {
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.59),
    0 0 0 7px rgba(238,255,255,.30),
    0 0 0 17px rgba(168,240,252,.14),
    0 12px 34px rgba(0,41,76,.27);
}
.portal-enter-title {
  font:400 clamp(17px,1.7vw,22px)/1.1 'Italiana',Georgia,serif;
  text-shadow:0 1px 4px rgba(0,35,60,.75);
}
/* The button is positioned relative to the uncropped illustration, not
   to empty letterbox space on a wide or tall desktop monitor. */
@media (min-width:851px) {
  .hero-artwork {
    position:absolute;
    inset:auto;
    top:50%;
    left:50%;
    width:min(100vw,177.68dvh);
    height:auto;
    aspect-ratio:1672 / 941;
    transform:translate(-50%,-50%);
  }
  .hero-artwork .hero-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
  }
}
@media (max-width:850px) and (orientation:portrait) {
  .portal-enter {
    --button-size:clamp(50px,15.5vw,67px);
    top:56%;
    left:50%;
  }
  .portal-enter-title {font-size:clamp(14px,4vw,18px);}
}
@media (max-height:540px) and (orientation:landscape) {
  .portal-enter {top:56%;left:50%;}
}

/* The entire source illustration now spirals inward through a WebGL canvas;
   the older conic-circle vortex is reserved for browsers without WebGL. */
.sea-spiral-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:2;
  pointer-events:none;
}
.sea-transition.is-canvas .sea-transition-wash,
.sea-transition.is-canvas .sea-vortex,
.sea-transition.is-canvas .sea-whole-fallback {
  display:none !important;
}
/* Graceful fallback still pulls the whole illustration into a spiral. */
.sea-whole-fallback {
  position:absolute;
  inset:0;
  display:none;
  z-index:1;
  background:#0d679a url('assets/aquaora-hero.webp') center/contain no-repeat;
  pointer-events:none;
}
.sea-transition.is-fallback .sea-whole-fallback {
  display:block;
  transform-origin:var(--portal-x) var(--portal-y);
  animation:sea-fallback-whirl 1.98s cubic-bezier(.21,.71,.12,1) forwards;
}
.sea-transition.is-fallback .sea-transition-wash {z-index:2;}
/* No white ornamental vortex: only the original picture swirling inward. */
.sea-transition.is-fallback .sea-vortex {display:none !important;}
@keyframes sea-fallback-whirl {
  0% {transform:rotate(0deg) scale(1);filter:blur(0);}
  36% {transform:rotate(115deg) scale(.83);filter:blur(1px);}
  73% {transform:rotate(410deg) scale(.27);filter:blur(3px);}
  100% {transform:rotate(780deg) scale(.015);filter:blur(7px);}
}
@media (prefers-reduced-motion:reduce) {
  .sea-transition.is-fallback .sea-whole-fallback {
    animation:none !important;
  }
}

/* Sea-colored fallback: match the pale turquoise wave texture in the artwork.
   Kept for visitors whose browser cannot use the full-image GPU effect. */
.sea-transition.is-fallback {
  background:#81cce8;
}
.sea-transition.is-fallback .sea-transition-wash {
  background:
    radial-gradient(circle at var(--portal-x) var(--portal-y),
      rgba(201,249,255,.16) 0%,
      rgba(131,214,240,.38) 43%,
      rgba(80,183,221,.62) 75%,
      rgba(115,208,232,.87) 100%),
    repeating-linear-gradient(164deg,
      rgba(224,251,255,.25) 0 2px,
      rgba(30,145,192,.13) 3px 12px,
      rgba(211,246,255,.15) 14px 17px);
}
.sea-transition.is-fallback .sea-vortex-waves {
  background:repeating-conic-gradient(from 0deg,
    rgba(211,251,255,.95) 0deg,
    rgba(109,218,243,.95) 12deg,
    rgba(53,171,214,.88) 28deg,
    rgba(114,208,235,.94) 41deg,
    rgba(221,251,255,.98) 58deg);
}
.sea-transition.is-fallback .sea-vortex-core {
  background:radial-gradient(circle at 38% 34%,
    #f1fdff 0%,#a3e6f6 21%,#58b7db 48%,#2c91c6 73%,#65c4e4 100%);
}
.sea-transition.is-fallback .sea-whole-fallback {
  background-color:#8cd4ea;
}