/* Motion pass: atmospheric surfaces and transform-only choreography. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.65, 0, .35, 1);
}

.header {
  transition: background .45s, box-shadow .45s, border-color .45s;
}
.header.is-scrolled {
  background: rgba(255, 255, 255, .88);
  border-bottom-color: #123d3210;
  box-shadow: 0 4px 28px #143f2e06;
}
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  height: 1px;
  background: var(--forest);
  bottom: -7px;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current='location']::after { transform: scaleX(1); }
.reading-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #1c6851, #a6cf72, #dce982);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.hero { position: relative; isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  inset: 8% -10% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 70%, #f2edbd80 0, transparent 35%),
    radial-gradient(ellipse at 83% 65%, #bce7d269 0, transparent 38%),
    radial-gradient(ellipse at 50% 100%, #dfecd8a8 0, transparent 45%);
  transform: translate3d(0, var(--hero-drift, 0px), 0);
  mask-image: linear-gradient(#000 0 78%, transparent 97%);
}
.hero-line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-line-inner { display: block; }
.hero-copy { will-change: auto; }
.hero-copy > .actions { position: relative; z-index: 2; }
.button {
  position: relative;
  overflow: hidden;
  transition: background .3s, color .3s, transform .5s var(--ease-out), box-shadow .5s;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #0c49311a; }
.button .icon { transition: transform .55s var(--ease-out); }
.button:hover .icon { transform: translateX(4px); }
.button-yellow { box-shadow: 0 0 0 1px #fff52d1a, 0 3px 18px #dbed2515; }
.button-yellow:hover { box-shadow: 0 8px 36px #dfe9402e; }
.brand img { transition: transform .8s var(--ease-out); }
.brand:hover img { transform: rotate(32deg); }

.venue-card {
  transition: box-shadow .65s var(--ease-out), border-color .4s, transform .65s var(--ease-out);
}
.venue-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 40px #173a3110;
  border-color: #b7cbbd;
}
.venue-caption > .icon { transition: transform .6s var(--ease-out); }
.venue-card:hover .venue-caption > .icon { transform: translate(4px, -3px) rotate(-35deg); }
.venue-photo > img { transition: transform 1.1s var(--ease-out); }
.venue-card:hover .venue-photo > img { transform: scale(1.055); }
.filter { transition: background .3s, color .3s, box-shadow .4s, border-color .3s; }
.filter.active { box-shadow: 0 4px 15px #123c3214; }

.reveal-pending { opacity: 0; translate: 0 34px; }
.motion-paused .reveal-pending { opacity: 1; translate: none; }

.how {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: #f3f6ee;
}
.how::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -55% -20%;
  background:
    radial-gradient(ellipse at 12% 65%, #d8eaaa, transparent 35%),
    radial-gradient(ellipse at 85% 22%, #c1e8d65c, transparent 32%);
  transform: translate3d(0, var(--scene-shift, 0px), 0);
  pointer-events: none;
}
.how .steps { position: relative; isolation: isolate; }
.how .steps::before,
.how .steps::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 22px;
  width: calc(100% - 70px);
  height: 1px;
  z-index: -1;
  background: #afc5aa66;
  pointer-events: none;
}
.how .steps::after {
  transform: scaleX(var(--step-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, #417a54, #b0cc72);
  height: 2px;
}
.how .steps li + li { border-left: 0; }
.step-number { background: #f1f6e8; box-shadow: 0 0 0 9px #f2f6eb; }

.venues {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #042722;
  padding-block: 110px;
}
.venues-layout { position: relative; z-index: 2; perspective: 1400px; }
.ambient-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 74% 17%, #18544a77, transparent 62%),
    linear-gradient(110deg, #021d1b 0%, #052b26 35%, #092f2b 72%, #031d1b 100%);
}
.ambient-streak {
  position: absolute;
  border-radius: 50%;
  transform-origin: center;
  filter: blur(32px);
  will-change: transform;
  animation-play-state: paused !important;
}
.streak-mint {
  left: 18%;
  top: 24%;
  width: 105%;
  height: 22%;
  background: linear-gradient(90deg, transparent 0%, #91dfba00 4%, #9beabf70 18%, #b8f3c7dd 40%, #7ae4bddd 72%, #77e6cb00 99%);
  transform: rotate(-51deg);
  animation: emerald-drift 15s var(--ease-soft) infinite alternate;
}
.streak-lime {
  left: -27%;
  top: 78%;
  width: 94%;
  height: 17%;
  background: linear-gradient(90deg, transparent, #e4df55aa 27%, #c1db7899 46%, #def695b5 68%, transparent);
  transform: rotate(29deg);
  animation: sunlight-drift 19s var(--ease-soft) infinite alternate;
}
.streak-teal {
  left: 41%;
  top: 4%;
  width: 49%;
  height: 94%;
  background: radial-gradient(ellipse, #53cbae3b, transparent 66%);
  transform: rotate(-29deg);
  animation: teal-drift 23s var(--ease-soft) infinite alternate;
}
.scene-active .ambient-streak { animation-play-state: running !important; }
.motion-paused .ambient-streak { animation-play-state: paused !important; }
.glass-ribs {
  position: absolute;
  inset: 0;
  opacity: .43;
  background: repeating-linear-gradient(90deg, transparent 0, #dbfff600 67px, #dafff60c 88px, #dcfff42b 89px, #001e2830 90px, transparent 92px);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}
.film-grain {
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.65' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #031e1b99, #031e1b3d 33%, transparent 65%);
}
.library {
  border: 1px solid #f1ffefd4;
  background: linear-gradient(125deg, #fcfffbe6, #effbf2d9 60%, #d6efdfdf);
  box-shadow: 0 40px 90px #001b2845, 0 0 0 1px #ffffff22, inset 0 1px 0 #ffffffb3;
  backdrop-filter: blur(18px);
  transform: perspective(1400px) translate3d(0, var(--panel-lift, 0px), 0) rotateX(var(--panel-angle, 0deg)) rotateY(var(--panel-turn, 0deg));
  transform-origin: 50% 60%;
}
.library-toolbar { position: relative; }
.library .view-button:not(.active) { color: var(--forest); background: #ffffff40; }
.library-photo { box-shadow: 0 5px 13px #163c3010; }
.benefit-icon { background: #ffffff03; transition: background .4s, border-color .4s; }
.benefit:hover .benefit-icon { background: #dcf59712; border-color: #ddec806b; }
.benefit-icon > .icon { transition: transform .7s var(--ease-out); }
.benefit:hover .benefit-icon > .icon { transform: rotate(-9deg) scale(1.08); }
@keyframes emerald-drift {
  from { transform: translate3d(-3%, 8%, 0) rotate(-51deg) scaleX(.95); }
  to { transform: translate3d(3%, -12%, 0) rotate(-44deg) scaleX(1.08); }
}
@keyframes sunlight-drift {
  from { transform: translate3d(-5%, 15%, 0) rotate(29deg); }
  to { transform: translate3d(8%, -18%, 0) rotate(23deg); }
}
@keyframes teal-drift {
  from { transform: translate3d(0, 0, 0) rotate(-29deg) scale(1); }
  to { transform: translate3d(-8%, 8%, 0) rotate(-34deg) scale(1.18); }
}

.faq-list summary { transition: color .3s; }
.faq-list summary:hover { color: #55865d; }
.faq-list .plus { transition: transform .55s var(--ease-out); }
.faq-list details[open] .plus { transform: rotate(180deg); }
.closing {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 95px;
  background: #eaf3e2;
}
.closing::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: -2;
  background:
    radial-gradient(ellipse at 23% 62%, #f2e6a6dd, transparent 35%),
    radial-gradient(ellipse at 79% 47%, #91d7b8b0, transparent 32%),
    radial-gradient(ellipse at 47% 45%, #fffdf3, transparent 45%);
  transform: translate3d(0, var(--scene-shift, 0px), 0) rotate(-12deg);
  pointer-events: none;
}
.closing::after {
  content: '';
  position: absolute;
  inset: -45% -15%;
  z-index: -1;
  background: repeating-radial-gradient(ellipse at 50% 130%, transparent 0 89px, #ffffffe0 90px 91px, transparent 92px 165px);
  opacity: .42;
  transform: translate3d(0, var(--orbit-shift, 0px), 0);
  pointer-events: none;
}
.closing .container { position: relative; z-index: 1; }

@media (max-width: 800px) {
  .venues { padding-block: 80px; }
  .streak-mint { left: 7%; top: 57%; width: 140%; height: 14%; }
  .streak-lime { top: 82%; left: -50%; width: 140%; height: 10%; }
  .ambient-field::after { background: linear-gradient(#031e1bb3, #031e1b70 39%, transparent 80%); }
  .glass-ribs { background-size: 65px 100%; }
  .library { backdrop-filter: none; }
  .closing { padding-block: 76px; }
}
@media (max-width: 520px) {
  .venues { padding-block: 65px; }
  .ambient-streak { filter: blur(23px); }
  .how .steps::before,
  .how .steps::after { left: 20px; top: 20px; bottom: 48px; height: auto; width: 1px; }
  .how .steps::after { transform: scaleY(var(--step-progress, 0)); transform-origin: top; }
  .step-number { box-shadow: 0 0 0 7px #f2f6eb; }
  .closing { padding-block: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; translate: none; }
  .ambient-streak { animation: none !important; }
  .library { transform: none; }
  .hero::before, .how::before, .closing::before, .closing::after { transform: none; }
}