/* Dimensional art direction: a tactile wordmark, cinematic harbour and
   machined Lucky Portal. The portal remains a real, accessible button. */

.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 5px 8px 0;
}
.brand-word {
  display: inline-flex;
  align-items: center;
  gap: .18em;
  white-space: nowrap;
  perspective: 580px;
  font-family: var(--font-body);
  font-size: clamp(1.55rem, 1.3rem + .52vw, 1.9rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.05;
}
.brand-letter {
  --lift: -8px;
  --yaw: -17deg;
  --yaw-back: 10deg;
  --bank: -4deg;
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #f7fffc;
  -webkit-text-fill-color: #f7fffc;
  text-shadow: 0 -1px 0 #fff, 0 1px 0 #c9fff3;
  transform-style: preserve-3d;
  transform-origin: center 82%;
  animation: brand-letter-kinetic 6.4s cubic-bezier(.23,.72,.28,1) infinite;
  animation-delay: calc(var(--letter-index) * .13s - .48s);
}
.brand-letter::before {
  content: attr(data-glyph);
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 1px;
  color: #389ca4;
  -webkit-text-fill-color: #389ca4;
  text-shadow: 1px 1px #227b87, 2px 2px #166575, 3px 3px #105262, 4px 4px #083845, 5px 6px 7px rgb(0 0 0 / .8);
  pointer-events: none;
}
.brand-letter:nth-child(even) { --yaw: 17deg; --yaw-back: -10deg; --bank: 4deg; }
.brand-letter:nth-child(3n) { --lift: -10px; }
.brand-letter:first-child, .brand-letter:last-child { color: #fff6dc; -webkit-text-fill-color: #fff6dc; }
@keyframes brand-letter-kinetic {
  0%, 5%, 28%, 48%, 68%, 100% { transform: translate3d(0, 0, 0) rotateY(0) rotateZ(0); filter: none; }
  12% { transform: translate3d(0, var(--lift), 14px) rotateY(var(--yaw)) rotateZ(var(--bank)); filter: drop-shadow(0 0 8px rgb(158 255 235 / .75)); }
  18% { transform: translate3d(0, -2px, 6px) rotateY(var(--yaw-back)) rotateZ(0); }
  23% { transform: translate3d(0, 1px, 0) rotateY(0) rotateZ(0); }
  56% { transform: translate3d(0, -4px, 10px) rotateY(var(--yaw-back)) rotateZ(0); filter: drop-shadow(0 0 5px rgb(255 241 195 / .55)); }
  62% { transform: translate3d(0, 0, 0) rotateY(0) rotateZ(0); }
}
.brand:hover .brand-letter, .brand:focus-visible .brand-letter { animation-duration: 3.5s; }
.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.icon { filter: drop-shadow(0 1px 0 rgb(255 239 197 / .65)) drop-shadow(0 2px 2px rgb(0 0 0 / .55)); }

.page-home .site-header { background: linear-gradient(180deg, rgb(2 9 12 / .84), rgb(2 9 12 / .18)); }
.page-home .site-header.is-scrolled { background: rgb(6 20 24 / .9); }

.hero {
  min-height: max(790px, 100svh);
  align-items: start;
  padding: calc(var(--header-h) + 30px) 0 100px;
}
.hero__inner {
  position: relative;
  z-index: 2;
  align-items: start;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 4vw, 72px);
}
.hero__copy { padding-top: clamp(95px, 10vw, 160px); }
.hero h1 { text-shadow: 0 12px 36px rgb(0 0 0 / .55); }
.hero__lede { text-shadow: 0 2px 12px rgb(0 0 0 / .8); }
.hero__facts { backdrop-filter: blur(8px); }

.scene {
  background: linear-gradient(180deg, #051014 0%, #092027 53%, #061419 100%);
}
.scene__harbour {
  --d: 14;
  inset: -2% -3%;
  background: url("/art/harbour-worlds-3d-v2.webp") 72% bottom / cover no-repeat;
  filter: saturate(.92) contrast(1.06);
}
.scene__atmosphere { --d: 8; }
.scene__atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 9% 12%, #fff3d7 0 1px, transparent 2px),
    radial-gradient(circle at 26% 8%, #b8e8df 0 1px, transparent 2px),
    radial-gradient(circle at 39% 20%, #fff3d7 0 1px, transparent 2px),
    radial-gradient(circle at 59% 9%, #b8e8df 0 1px, transparent 2px),
    radial-gradient(circle at 77% 18%, #fff3d7 0 1px, transparent 2px),
    radial-gradient(circle at 89% 7%, #b8e8df 0 1px, transparent 2px);
  opacity: .55;
  filter: drop-shadow(0 0 4px #c8fff1);
}
.scene__moon {
  top: 8%;
  left: 28%;
  right: auto;
  width: clamp(140px, 12vw, 190px);
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  filter: drop-shadow(0 0 26px rgb(255 234 187 / .54)) drop-shadow(0 0 70px rgb(190 235 240 / .26));
  animation: moon-float 9s ease-in-out infinite alternate;
}
.scene__moon::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 239 193 / .25), rgb(166 224 224 / .13) 38%, transparent 67%);
}
.scene__moon::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 29% 24%, rgb(255 255 255 / .12), transparent 42%, rgb(3 18 25 / .34) 100%);
  opacity: .56;
  pointer-events: none;
}
.scene__moon img { display: block; width: 100%; height: auto; }
@keyframes moon-float { to { transform: translateY(-9px) rotate(3deg); } }
.scene__aurora--a { opacity: .2; }
.scene__aurora--b { opacity: .16; }
.scene__scrim {
  background:
    linear-gradient(90deg, rgb(2 10 13 / .68), rgb(2 10 13 / .34) 44%, rgb(2 10 13 / .08) 100%),
    linear-gradient(180deg, rgb(2 9 12 / .2), transparent 36%, rgb(3 11 14 / .1) 68%, var(--bg) 100%);
}

.hero__beacon {
  position: absolute;
  z-index: 1;
  top: 28%;
  left: 88.5%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.hero__beacon-islet {
  display: none;
}
.hero__beacon-beam {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: min(40vw, 560px);
  height: clamp(140px, 20vw, 260px);
  transform-origin: 0 50%;
  transform: translateY(-50%) rotate(136deg);
  clip-path: polygon(0 49%, 100% 0, 100% 100%);
  background: linear-gradient(90deg, rgb(255 241 181 / .7), rgb(255 218 142 / .38) 27%, rgb(255 220 159 / .08) 75%, transparent);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: .65;
  animation: beacon-cast 6s ease-in-out infinite;
}
.hero__beacon-flare {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 24px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffe4a1 35%, rgb(255 206 108 / .3) 65%, transparent 72%);
  box-shadow: 0 0 20px 7px rgb(255 215 137 / .48), 0 0 55px 17px rgb(255 195 107 / .19);
  animation: beacon-flare 6s ease-in-out infinite;
}
@keyframes beacon-cast { 50% { opacity: .9; transform: translateY(-50%) rotate(140deg); } }
@keyframes beacon-flare { 50% { opacity: .75; transform: translate(-50%, -50%) scale(1.15); } }

.portal {
  --portal: clamp(370px, 39vw, 570px);
  justify-self: end;
  margin-top: 58px;
  gap: 13px;
  perspective: 1000px;
}
.portal__stage { filter: drop-shadow(0 24px 21px rgb(0 0 0 / .5)); }
.portal__stage::after {
  top: 91%;
  height: 23%;
  background: radial-gradient(ellipse at center, rgb(255 175 104 / .32), rgb(111 220 191 / .09) 50%, transparent 73%);
  filter: blur(18px);
}
.portal__halo { inset: -17%; opacity: .65; }
.portal__plinth {
  position: absolute;
  z-index: 0;
  inset: 1%;
  border-radius: 50%;
  background: conic-gradient(from 15deg, #663931, #e7a776 11%, #45312d 25%, #c47d55 40%, #f2d39f 50%, #55372f 68%, #b67856 82%, #50312d);
  transform: translateY(17px) scaleY(.98);
  box-shadow: 0 13px 0 #241e1d, 0 19px 0 #0e1719, 0 30px 35px rgb(0 0 0 / .8), 0 0 50px rgb(244 159 92 / .18);
}
.portal__rings {
  z-index: 1;
  inset: 1.5%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -1deg, rgb(255 234 182 / .72) 0deg 1deg, transparent 1deg 5deg),
    conic-gradient(from 0deg, #281d1d, #e2ae72 8%, #54352c 18%, #d98f59 31%, #312626 42%, #f5d4a0 55%, #5e3c33 72%, #e0ac73 85%, #281d1d);
  box-shadow: inset 0 2px 6px #fff1c3, inset 0 -15px 20px rgb(25 14 12 / .9), 0 0 0 2px rgb(255 232 180 / .55), 0 0 0 6px #321f1c, 0 0 0 8px rgb(255 221 160 / .24);
}
.portal__rings svg { display: none; }
.portal__bezel {
  position: absolute;
  inset: 5.8%;
  border-radius: 50%;
  background: conic-gradient(from 18deg, #5d3b31, #ffdfa4, #58382f, #d98e5b, #332523, #f9d6a0, #5d3b31);
  box-shadow: inset 0 0 0 2px rgb(255 238 192 / .7), 0 0 0 2px #241d1b, 0 6px 14px rgb(0 0 0 / .8);
}
.portal__engraving {
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgb(255 230 175 / .23) 0deg 3deg, transparent 3deg 30deg),
    radial-gradient(circle at 35% 30%, #164147, #081a20 55%, #041015 75%);
  box-shadow: inset 0 11px 24px rgb(0 0 0 / .75), inset 0 0 0 3px #694532, inset 0 0 0 7px #191b1b, 0 0 0 2px rgb(255 233 180 / .4);
}
.portal__inner-ring {
  position: absolute;
  inset: 16%;
  border: clamp(8px, 1vw, 13px) solid transparent;
  border-radius: 50%;
  background: linear-gradient(#07191d, #07191d) padding-box,
    conic-gradient(from 20deg, #f9ddb2, #6c3b32, #f3b879, #352423, #c7885e, #f9ddb2) border-box;
  box-shadow: 0 8px 16px rgb(0 0 0 / .8), inset 0 3px 9px rgb(0 0 0 / .85), 0 0 14px rgb(255 208 129 / .35);
}
.portal__rose {
  position: absolute;
  inset: 11%;
  background: conic-gradient(from 0deg, #ffe4ac, #527f82 12.5%, #d39462 25%, #456f77 37.5%, #ffe4ac 50%, #456f77 62.5%, #d39462 75%, #527f82 87.5%, #ffe4ac);
  clip-path: polygon(50% 0, 56% 39%, 85% 15%, 61% 43%, 100% 50%, 61% 57%, 85% 85%, 56% 61%, 50% 100%, 44% 61%, 15% 85%, 39% 57%, 0 50%, 39% 43%, 15% 15%, 44% 39%);
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / .7));
  opacity: .76;
  animation: compass-drift 70s linear infinite;
}
@keyframes compass-drift { to { transform: rotate(360deg); } }
.portal__bearing {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(22px, 2.3vw, 30px);
  aspect-ratio: 1;
  border: 1px solid #f1d6a7;
  border-radius: 50%;
  background: linear-gradient(145deg, #6a4b35, #201d1b 60%, #101d20);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 3px 0 #211b18, 0 7px 8px rgb(0 0 0 / .55);
  color: #fff0c9;
  font: 800 clamp(10px, 1vw, 13px)/1 var(--font-body);
  text-shadow: 0 1px 2px #000;
}
.portal__bearing--n { top: 13%; left: 50%; transform: translate(-50%, -50%); }
.portal__bearing--e { top: 50%; right: 13%; transform: translate(50%, -50%); }
.portal__bearing--s { bottom: 13%; left: 50%; transform: translate(-50%, 50%); }
.portal__bearing--w { top: 50%; left: 13%; transform: translate(-50%, -50%); }
.portal__gem {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(8px, 1vw, 14px);
  aspect-ratio: 1;
  border-radius: 4px 50% 4px 50%;
  background: radial-gradient(circle at 28% 22%, #fffef1, #bcf6e6 27%, #258f80 65%, #073f42 90%);
  border: 1px solid #f7dab0;
  transform: rotate(var(--gem-angle)) translateY(calc(var(--portal) * -.444)) rotate(45deg);
  transform-origin: center;
  box-shadow: 0 0 0 2px #5a3a2b, inset 1px 1px 2px #fff, 0 0 12px #73ebd0;
}
.portal__gem:nth-child(3n) { background: radial-gradient(circle at 25% 20%, #fff6d4, #f2ad7c 34%, #9e4538 75%); box-shadow: 0 0 0 2px #5a3a2b, inset 1px 1px 2px #fff, 0 0 12px #ff9c75; }
.portal__pointer {
  position: absolute;
  z-index: 5;
  top: -.7%; left: 50%;
  width: clamp(24px, 3vw, 39px);
  height: clamp(35px, 4.6vw, 58px);
  transform: translateX(-50%);
  clip-path: polygon(9% 0, 91% 0, 80% 55%, 50% 100%, 20% 55%);
  background: linear-gradient(90deg, #754938 0%, #fff1be 27%, #e7a965 48%, #5c382e 83%, #281f1c 100%);
  filter: drop-shadow(0 6px 4px rgb(0 0 0 / .8));
}
.portal__pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 18%;
  width: 9px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b5f9e7 44%, #2e978d);
  box-shadow: 0 0 9px #b5f9e7;
}
.portal__beacon-light {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 12deg, rgb(255 245 194 / .85) 27deg, rgb(255 207 121 / .42) 40deg, transparent 62deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 26%, #000 32% 48%, transparent 52%);
  mask-image: radial-gradient(circle, transparent 0 26%, #000 32% 48%, transparent 52%);
  mix-blend-mode: screen;
  opacity: .56;
  pointer-events: none;
  animation: beacon-hit 6s ease-in-out infinite;
}
@keyframes beacon-hit { 50% { opacity: .95; transform: rotate(6deg); } }
.portal.is-spinning .portal__beacon-light { opacity: 1; animation-duration: 1.2s; }
.portal__orbit--back { opacity: .6; }
.orb__scale {
  overflow: visible;
  border: 5px solid #b78855;
  background: #432c25;
  box-shadow: inset 0 0 0 2px #fff0ca, 0 0 0 2px #35211c, 0 9px 0 #39201b, 0 18px 22px rgb(0 0 0 / .7), 0 0 16px rgb(255 208 129 / .3);
}
.orb__scale picture, .orb__scale img { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.portal__core {
  inset: 22%;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px #f9dba7,
    0 0 0 10px #4b2e28,
    0 0 0 13px #dfaa73,
    0 0 0 17px #221c1c,
    0 16px 0 #1b1515,
    0 32px 40px rgb(0 0 0 / .82),
    0 0 70px var(--glow);
}
.portal__core::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 8px 16px rgb(0 0 0 / .6), inset 0 0 0 2px rgb(255 247 217 / .35);
  pointer-events: none;
}
.portal__cue {
  top: 79%;
  border: 1px solid #f7d69c;
  background: linear-gradient(155deg, #694431, #2c2222 60%, #151e20);
  box-shadow: inset 0 1px 0 rgb(255 252 220 / .45), 0 5px 0 #271b19, 0 12px 20px rgb(0 0 0 / .65);
}
.mood-picker {
  border-color: rgb(255 225 167 / .48);
  background: linear-gradient(180deg, rgb(54 39 31 / .96), rgb(5 19 22 / .94));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .17), 0 7px 0 rgb(3 10 12 / .8), 0 15px 25px rgb(0 0 0 / .4);
}
.mood-picker input:checked + span {
  background: linear-gradient(150deg, #fff7dc, #dbaa6d 68%, #a06141);
  color: #251c1a;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgb(0 0 0 / .55);
}
.portal__hint { color: #d6e6e1; text-shadow: 0 2px 9px #000; }

@media (min-width: 861px) and (max-width: 1000px) {
  .hero__beacon { left: 92%; }
}

.portal-tile__orb, .tab-bar__orb, .finale__ring {
  background: conic-gradient(from 30deg, #4c342a, #f6d6a0, #5c3c31, #e6a46f, #322a29, #f6d6a0, #4c342a);
  box-shadow: inset 0 3px 5px #fff2c7, inset 0 -8px 12px #1e1514, 0 6px 0 #2b1c1a, 0 17px 22px rgb(0 0 0 / .55), 0 0 28px var(--glow);
}
.portal-tile__orb::after, .tab-bar__orb::after, .finale__ring::before {
  border: 3px solid #a6e9d5;
  border-left-color: #402d28;
  box-shadow: inset 0 0 9px #123a3d, 0 0 8px #a6e9d5;
}

@media (max-width: 860px) {
  .hero { min-height: auto; padding: calc(var(--header-h) + 20px) 0 72px; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__copy { display: contents; padding: 0; }
  .portal { order: 1; --portal: min(78vw, 390px); justify-self: center; margin: 18px 0 12px; }
  .hero__copy .eyebrow--pill { order: 2; }
  .hero h1 { order: 3; margin-top: 20px; }
  .hero__lede { order: 4; }
  .hero__actions { order: 5; }
  .hero__facts { order: 6; }
  .scene__harbour { background-position: 54% center; }
  .scene__moon { display: block; width: clamp(72px, 13vw, 120px); top: 78px; left: auto; right: 3%; }
  .hero__beacon { z-index: 3; top: calc(var(--header-h) + 90px); left: auto; right: -3%; width: clamp(110px, 26vw, 180px); height: auto; aspect-ratio: 1; }
  .hero__beacon-islet { position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 1; background: url("/art/lighthouse-3d.webp") center / contain no-repeat; transform: scaleX(-1); filter: drop-shadow(0 14px 14px rgb(0 0 0 / .55)); }
  .hero__beacon-beam { left: 45%; top: 19%; width: min(60vw, 400px); height: clamp(100px, 25vw, 220px); transform: translateY(-50%) rotate(147deg); opacity: .48; }
  .hero__beacon-flare { left: 45%; top: 19%; }
  @keyframes beacon-cast { 50% { opacity: .72; transform: translateY(-50%) rotate(151deg); } }
  .scene__scrim { background: linear-gradient(180deg, rgb(2 9 12 / .43), rgb(2 9 12 / .23) 32%, rgb(2 9 12 / .58) 65%, var(--bg) 100%); }
}
@media (max-width: 430px) {
  .brand-word { font-size: 1.54rem; }
  .portal { --portal: min(78vw, 320px); margin-top: 29px; }
  .scene__moon { width: 72px; top: 78px; left: auto; right: 1%; }
  .hero h1 { font-size: clamp(2.45rem, 12vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .scene__moon { animation: none; }
  .brand-letter { animation: none; will-change: auto; }
  .hero__beacon-beam, .hero__beacon-flare, .portal__beacon-light, .portal__rose { animation: none; }
}