/* Glass controls with mineral-blue surfaces and warm edge light.
   Tinted layers keep the surface inexpensive over the moving WebGL scene. */
.shore-story {
  --accent-peach:#f3c3a2;--accent-peach-soft:#fae7d8;--accent-peach-ink:#875036;
  --red:var(--accent-peach-ink);
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-ivory: #eff5f4;
  --ui-sky: #a9d4ed;
  --ui-gold: var(--accent-peach);
}

.shore-story :is(.header-cta, .hero .round-link) {
  --light-x: 28%;
  --light-y: 0%;
  --edge-angle: 138deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ui-ivory);
  background:
    linear-gradient(165deg, #35505eee, #192e3cf5 76%) padding-box,
    conic-gradient(from var(--edge-angle), #789aa5, #3b5666 20%, #799bb7 40%, #b5d9ef 51%, #e7be86 65%, #7b8b91 79%, #789aa5) border-box;
  box-shadow:
    inset 0 1px 0 #ffffff24,
    inset 0 -1px 0 #00000035,
    0 2px 3px #07100c35,
    0 10px 22px #0610094a;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .28s var(--ui-ease), box-shadow .28s var(--ui-ease);
  -webkit-tap-highlight-color: transparent;
}

.shore-story :is(.header-cta, .hero .round-link)::before,
.shore-story :is(.header-cta, .hero .round-link)::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.shore-story :is(.header-cta, .hero .round-link)::before {
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px 85px at var(--light-x) var(--light-y), #f6f3d43b, #c4deca0b 56%, transparent 78%);
  opacity: .56;
  transition: opacity .3s ease;
}

.shore-story :is(.header-cta, .hero .round-link)::after {
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, #ffffff0e 38%, #f1f3dd20 52%, transparent);
  opacity: 0;
  transform: translateX(-240%) skewX(-22deg);
  transition: transform .8s var(--ui-ease), opacity .2s ease;
}

.shore-story .header-cta {
  min-height: 51px;
  padding: 15px 23px;
  gap: 29px;
  letter-spacing: .045em;
}
.shore-story .header-cta > span {
  transition: transform .3s var(--ui-ease);
}
.shore-story .hero .round-link {
  min-height: 64px;
  padding: 10px 25px 10px 15px;
  gap: 14px;
  font-size: 13px;
}
.shore-story .hero .round-link .round-arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 26px;
  transition: transform .35s var(--ui-ease);
}
.shore-story .hero .round-link small {
  color: #dbe8eac9;
  font-size: 7px;
  letter-spacing: .10em;
  margin-top: 5px;
}

 .shore-story .brand > span { color: var(--accent-peach); }
.shore-story .ms-page-progress { background: var(--accent-peach); }
.shore-story .scene-note .note-line::before { background: var(--accent-peach); }

/* Quiet glass navigation and smaller controls share the same edge lighting. */
.shore-story .gnav {
  gap: 3px;
  padding: 5px;
  border: 1px solid #dfe8d31b;
  border-radius: 999px;
  background: #112a3c50;
  box-shadow: inset 0 1px 0 #ffffff0c, 0 3px 8px #07130c14;
}
.shore-story .gnav a {
  padding: 9px 14px;
  border-radius: 999px;
  color: #edf3f2;
  transition: color .2s ease, background-color .2s ease;
}
.shore-story .gnav a span { margin-top: 3px; }
.shore-story .motion-toggle {
  min-width: 53px;
  border: 1px solid #dceef11a;
  border-radius: 16px;
  background: #152e3c24;
  box-shadow: inset 0 1px 0 #ffffff0a;
  transition: background-color .2s ease, border-color .2s ease;
}
.shore-story .motion-toggle span::before {
  background: #e5c38f;
  box-shadow: 0 0 7px #e5c38f66;
}
.shore-story .motion-toggle[aria-pressed='true'] span::before {
  background: #929b8c;
  box-shadow: none;
}
.shore-story .text-link {
  position: relative;
  gap: 36px;
  border-bottom-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color .2s ease;
}
.shore-story .text-link::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--ui-sky), var(--ui-gold) 64%, currentColor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ui-ease);
}
.shore-story .text-link > span { transition: transform .3s var(--ui-ease); }
.shore-story .back-top {
  border: 1px solid #faffee85;
  background: #edf2ef;
  color: #263e4d;
  box-shadow: inset 0 1px 0 #ffffff, 0 4px 10px #1b342c16;
  transition: transform .25s var(--ui-ease), box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .shore-story :is(.header-cta, .hero .round-link):hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #ffffff3d, inset 0 -1px 0 #00000038, 0 3px 5px #07100c40, 0 14px 28px #06100957, 0 0 18px #bcdac10b;
  }
  .shore-story :is(.header-cta, .hero .round-link):hover::before { opacity: 1; }
  .shore-story :is(.header-cta, .hero .round-link):hover::after {
    opacity: 1;
    transform: translateX(350%) skewX(-22deg);
  }
  .shore-story .header-cta:hover > span { transform: translate(2px, -2px); }
  .shore-story .hero .round-link:hover .round-arrow { transform: rotate(-45deg); }
  .shore-story .gnav a:hover { background: #edf3f2; color: #263e4d; }
  .shore-story .gnav a:hover span { color: #536c76; }
  .shore-story .motion-toggle:hover { background: #e7edd415; border-color: #dceef14a; }
  .shore-story .text-link:hover { gap: 36px; }
  .shore-story .text-link:hover::after { transform: scaleX(1); }
  .shore-story .text-link:hover > span { transform: translate(3px, -3px); }
  .shore-story .back-top:hover { transform: translateY(-3px); box-shadow: 0 7px 15px #1b342c24; }
}

.shore-story :is(.header-cta, .hero .round-link):active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 5px #00000036, 0 2px 5px #07100c30;
  transition-duration: .1s;
}
.shore-story :is(.header-cta, .round-link, .gnav a, .motion-toggle, .back-top):focus-visible {
  outline: 2px solid #e4c89b;
  outline-offset: 4px;
}
.shore-story .text-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
.shore-story .text-link:focus-visible::after { transform: scaleX(1); }

@media (max-width: 1100px) {
  .shore-story .gnav a { padding: 8px 11px; }
  .shore-story .header-cta { padding: 14px 20px; gap: 20px; }
}
@media (max-width: 700px) {
  .shore-story .hero .round-link { min-height: 58px; padding: 9px 22px 9px 12px; gap: 11px; font-size: 12px; }
  .shore-story .hero .round-link .round-arrow { width: 32px; height: 32px; font-size: 24px; }
  .shore-story .hero .round-link small { font-size: 6px; }
  .shore-story .motion-toggle { border-radius: 14px; }
  .shore-story .text-link, .shore-story .text-link:hover { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .shore-story :is(.header-cta, .round-link, .round-arrow, .back-top, .text-link, .text-link > span, .header-cta > span) { transition: none; transform: none; }
  .shore-story :is(.header-cta, .hero .round-link)::after { display: none; }
  .shore-story :is(.header-cta, .hero .round-link)::before, .shore-story .text-link::after { transition: none; }
  .shore-story :is(.header-cta, .hero .round-link, .back-top):hover,
  .shore-story :is(.header-cta, .hero .round-link):active,
  .shore-story .hero .round-link:hover .round-arrow,
  .shore-story .header-cta:hover > span,
  .shore-story .text-link:hover > span { transform: none; }
}
.motion-paused .shore-story :is(.header-cta, .hero .round-link)::after { display: none; }
.motion-paused .shore-story :is(.header-cta, .hero .round-link, .round-arrow, .header-cta > span, .text-link > span, .back-top) { transition: none; }
.motion-paused .shore-story :is(.header-cta, .hero .round-link, .back-top):hover,
.motion-paused .shore-story :is(.header-cta, .hero .round-link):active,
.motion-paused .shore-story .hero .round-link:hover .round-arrow,
.motion-paused .shore-story .header-cta:hover > span,
.motion-paused .shore-story .text-link:hover > span { transform: none; }