/* XYPN LIVE landing (/xypn) and its confirmation page (/xypn/confirmed).
 *
 * Ported from the Claude Design handoff ("CanyonOps XYPN Landing v3" and
 * "CanyonOps XYPN Reserved"). Most visual styling stays inline in the markup,
 * exactly as designed; this file carries what the design runtime used to
 * compute in JS: breakpoints, the scroll-driven states, and the modal.
 *
 * The design's one breakpoint is 900px (below it is "mobile"); the task grid
 * gains an Owner column at 1180px.
 */

html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--navy-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  --transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
/* Base type from the design system's colors_and_type.css, which the design loaded. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--navy); letter-spacing: -0.02em; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-mid); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
input, select, button { font-family: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

@keyframes shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(260%); } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(126,200,227,.22), 0 0 28px rgba(126,200,227,.35); }
  50% { box-shadow: 0 0 0 7px rgba(126,200,227,.3), 0 0 48px rgba(126,200,227,.55); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Breakpoint wrappers (the design's isDesktop / isMobile / showOwner) ── */
.xy-desk { display: contents; }
.xy-mob { display: none; }
.xy-wide { display: none; }
@media (max-width: 899.98px) {
  .xy-desk { display: none; }
  .xy-mob { display: contents; }
}
@media (min-width: 1180px) {
  .xy-wide { display: contents; }
}

/* ── Nav: transparent over the hero, frosted once scrolled ── */
.xy-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
}
.xy-nav.is-scrolled { background: rgba(13,31,52,.88); border-bottom-color: rgba(255,255,255,.08); }

/* ── Hero builder mock ── */
.xy-hero-grid { grid-template-columns: minmax(0,.72fr) minmax(0,1.6fr); height: 480px; }
.xy-row { grid-template-columns: minmax(0,1fr) 116px repeat(3,52px); }
@media (min-width: 1180px) { .xy-row { grid-template-columns: minmax(0,1fr) 116px 136px repeat(3,52px); } }
@media (max-width: 899.98px) {
  .xy-hero-grid { grid-template-columns: minmax(0,1fr); height: 400px; }
  .xy-row { grid-template-columns: minmax(0,1fr) repeat(3,44px); }
}
.xy-task { transition: opacity .5s ease, transform .5s cubic-bezier(.32,.72,0,1), background 1.2s ease; opacity: 0; transform: translateY(10px); background: #fff; }
.xy-task.is-shown { opacity: 1; transform: none; }
.xy-task.is-fresh { background: var(--sky-pale); }
.xy-head { transition: opacity .5s ease; opacity: 0; }
.xy-head.is-shown { opacity: 1; }
.xy-cell { transition: all .35s ease; background: #fff; border: 1.5px solid var(--border); transform: scale(.85); }
.xy-cell svg { opacity: 0; transition: opacity .3s ease; }
.xy-cell.is-lit { transform: scale(1); }
.xy-cell.is-lit svg { opacity: 1; }
.xy-cell.t1, .xy-cell.t1 svg { transition-delay: .15s; }
.xy-cell.t2, .xy-cell.t2 svg { transition-delay: .27s; }
.xy-cell.t3, .xy-cell.t3 svg { transition-delay: .39s; }
.xy-cell.is-lit.t1 { background: #7EC8E3; border-color: #7EC8E3; }
.xy-cell.is-lit.t2 { background: #5B8DB8; border-color: #5B8DB8; }
.xy-cell.is-lit.t3 { background: var(--navy); border-color: var(--navy); }

/* ── Origin story ── */
.xy-origin { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.xy-photo { position: sticky; }
@media (max-width: 899.98px) {
  .xy-origin { grid-template-columns: minmax(0,1fr); }
  .xy-photo { position: relative; }
}

/* ── How it works: scroll-driven steps + sticky screenshot frame ── */
.xy-story { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.xy-step { min-height: 78vh; opacity: .35; }
.xy-step.is-active { opacity: 1; }
@media (max-width: 899.98px) {
  .xy-story { grid-template-columns: minmax(0,1fr); }
  .xy-step { min-height: auto; opacity: 1; }
}
.xy-frame {
  position: absolute; inset: 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.32,.72,0,1);
  opacity: 0; transform: translateY(16px) scale(.98);
}
.xy-frame.is-before { transform: translateY(-16px) scale(.98); }
.xy-frame.is-active { opacity: 1; transform: none; }
.xy-zoom { transition: transform 9s linear; transform: scale(1); }
.xy-frame.is-active .xy-zoom { transform: scale(1.08); }
.xy-bar { background: var(--border); }
.xy-bar.is-on { background: var(--navy); }

/* ── Booking sheet: centered modal on desktop, bottom sheet on phones ── */
.xy-book-overlay { align-items: center; padding: 24px; }
.xy-book-sheet { height: min(760px, 90vh); border-radius: 18px; }
@media (max-width: 899.98px) {
  .xy-book-overlay { align-items: flex-end; padding: 0; }
  .xy-book-sheet { height: 92vh; border-radius: 18px 18px 0 0; }
}
body.xy-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}