/* ==========================================================================
   TIERS — the deltas that tokens alone can't express.

   Basic   : complete, clean, restrained. Static hero, gentle fades.
   Plus    : branded. Slideshow hero, accent rules, owner-mode editing.
   Premium : authored. Destination-switcher hero, parallax, transparent
             header, ticket-stub motif, blog.
   ========================================================================== */

/* ===================== LITE (Core Website Base) ===================== */
/* One page, everything stacked on it. Contact is a section with details only —
   no form, no map. That's the line Core Website Plus buys its way over.
   It still has depth, hover, and a fade-in: plainer, never broken. */
html[data-tier="lite"] .hero-trust{ display:none; }

html[data-tier="lite"] .contact-form,
html[data-tier="lite"] .map-embed{ display:none; }
html[data-tier="lite"] .contact-grid{ grid-template-columns:1fr; max-width:640px; }

.lite-contact-note{ display:none; }
html[data-tier="lite"] .lite-contact-note{
  display:block; margin-top:26px; padding:18px 20px;
  background:var(--mist); border-radius:var(--radius);
  font-size:.86rem; color:#3d545f;
}
html[data-tier="lite"] .lite-contact-note strong{ color:var(--marine); }

/* ===================== LITE & BASIC ===================== */
/* One static hero image — no slideshow, no parallax. */
html[data-tier="lite"] .hero-bg-slide:not(:first-child),
html[data-tier="basic"] .hero-bg-slide:not(:first-child){ display:none; }

/* Where About is a section of the home page, the About-page-only extras
   (the page heading and the values grid) don't apply. */
html[data-tier="lite"] .about-values,
html[data-tier="basic"] .about-values,
html[data-tier="lite"] .about-page-head,
html[data-tier="basic"] .about-page-head{ display:none; }

/* ===================== INNER-PAGE BACKGROUNDS =====================
   The home page earns its atmosphere from the hero photo. Every other page
   was landing on flat sand and reading as dead space, so Plus and Premium get
   a geometric wash behind the content. Kept extremely low-contrast — it should
   register as texture, never as pattern competing with the cards on top. */

/* Plus: a fine dot matrix. */
html[data-tier="plus"] .page:not(#page-home){
  background-color:var(--sand);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,61,92,.075) 1px, transparent 0);
  background-size:26px 26px;
}

/* Premium: the same matrix, plus two soft colour washes anchored to the top of
   the page so content descends out of them. No diagonal rules — they fought
   the dot matrix and read as noise rather than texture. */
html[data-tier="premium"] .page:not(#page-home){
  background-color:var(--sand);
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(28,110,140,.11), transparent 60%),
    radial-gradient(ellipse 60% 40% at 88% 8%, rgba(244,169,80,.10), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(11,61,92,.07) 1px, transparent 0);
  background-size:auto, auto, 26px 26px;
  background-repeat:no-repeat, no-repeat, repeat;
}

/* ===================== PLUS: BRANDING LAYER ===================== */
/* This is what "custom branding & modern UI" buys, made visible. */
html[data-tier="plus"] .section-head h2,
html[data-tier="premium"] .section-head h2{
  position:relative; display:inline-block;
}
/* branded underline sweep on section headings */
html[data-tier="plus"] .section-head h2::after,
html[data-tier="premium"] .section-head h2::after{
  content:''; position:absolute; left:0; bottom:-10px; height:3px; width:0;
  background:linear-gradient(90deg, var(--amber), rgba(244,169,80,0));
  border-radius:2px;
  transition:width 1s var(--ease) .2s;
}
html[data-tier="plus"] .reveal.in-view .section-head h2::after,
html[data-tier="premium"] .reveal.in-view .section-head h2::after,
html[data-tier="plus"] .section-head.reveal.in-view h2::after,
html[data-tier="premium"] .section-head.reveal.in-view h2::after{ width:120px; }

/* branded card treatment: accent edge on hover */
html[data-tier="plus"] .media-card,
html[data-tier="premium"] .media-card{ position:relative; }
html[data-tier="plus"] .media-card::after,
html[data-tier="premium"] .media-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
html[data-tier="plus"] .media-card:hover::after,
html[data-tier="premium"] .media-card:hover::after{ transform:scaleX(1); }

/* the eyebrow rule grows on hover of its section — small, but it reads as "designed" */
html[data-tier="plus"] .section-head:hover .eyebrow::before,
html[data-tier="premium"] .section-head:hover .eyebrow::before{ width:calc(var(--eyebrow-rule) + 16px); }

/* ===================== PREMIUM: AUTHORED LAYER ===================== */

/* transparent header floating over the home hero until scrolled past */
html[data-tier="premium"] .site-header.hero-transparent{
  background:transparent; backdrop-filter:none; box-shadow:none; border-bottom-color:transparent;
}
html[data-tier="premium"] .site-header.hero-transparent .nav-item{ color:#fff; }
html[data-tier="premium"] .site-header.hero-transparent .nav-item:hover{ background:rgba(255,255,255,.15); }
html[data-tier="premium"] .site-header.hero-transparent .nav-item.locked{ color:rgba(255,255,255,.55); }
html[data-tier="premium"] .site-header.hero-transparent .brand-name{ color:#fff; }
html[data-tier="premium"] .site-header.hero-transparent .brand-name span{ color:rgba(255,255,255,.75); }
html[data-tier="premium"] .site-header.hero-transparent .brand-mark{ background:rgba(255,255,255,.18); backdrop-filter:blur(6px); }
html[data-tier="premium"] .site-header.hero-transparent .nav-toggle span{ background:#fff; }

/* The premium hero is a composition, not a text block: the copy runs flush to
   the left edge (NOT centred in the .wrap like the other tiers) so the photo
   carries the right two-thirds, and the featured portrait + switcher row sit
   against the bottom. Everything below is sized so the whole arrangement lands
   inside one screen — when the portrait and pills get scaled up they push the
   switcher under the fold and the whole effect collapses. */
html[data-tier="premium"] .hero-inner{ max-width:none; padding-left:52px; }
html[data-tier="premium"] .hero-content{ padding-bottom:48px; }

html[data-tier="premium"] .hero-overlay{
  background:linear-gradient(120deg, rgba(11,61,92,.78), rgba(28,110,140,.45) 60%, rgba(244,169,80,.25));
}
html[data-tier="plus"] .hero-bg-slide.active,
html[data-tier="premium"] .hero-bg-slide.active{ transform:scale(1.12); }

/* Staggered hero entrance — Basic and up. Lite's hero is deliberately static:
   that's the one place the tier line is drawn by absence rather than depth. */
html:not([data-tier="lite"]) .hero-content > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
html:not([data-tier="lite"]) .hero-content.in > *{ opacity:1; transform:none; }
html:not([data-tier="lite"]) .hero-content.in > *:nth-child(1){ transition-delay:.05s; }
html:not([data-tier="lite"]) .hero-content.in > *:nth-child(2){ transition-delay:.18s; }
html:not([data-tier="lite"]) .hero-content.in > *:nth-child(3){ transition-delay:.32s; }
html:not([data-tier="lite"]) .hero-content.in > *:nth-child(4){ transition-delay:.46s; }
html:not([data-tier="lite"]) .hero-content.in > *:nth-child(5){ transition-delay:.60s; }

/* premium hero: single CTA, no secondary button */
html[data-tier="premium"] .hero-actions .btn-ghost{ display:none; }
/* premium hero: trust strip is replaced by the destination switcher */
html[data-tier="premium"] .hero-trust{ display:none; }

/* soft crossfade when switching featured destinations */
.hero-content, .hero-thumb-wrap{ transition:opacity .35s ease; }
.hero-content.dest-fade, .hero-thumb-wrap.dest-fade{ opacity:.12; }

/* premium-only featured-destination portrait */
.hero-thumb-wrap{ display:none; }
html[data-tier="premium"] .hero-thumb-wrap{
  display:block; width:270px; height:340px; margin-top:28px;
  border-radius:18px; overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.4);
  border:4px solid rgba(255,255,255,.2);
}
.hero-thumb-wrap img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s ease; }

/* premium-only destination switcher — the featured one drops out of the row */
.dest-switcher{ display:none; }
html[data-tier="premium"] .dest-switcher{
  display:flex; position:absolute; right:56px; bottom:48px; z-index:3;
  gap:30px; flex-wrap:nowrap; justify-content:flex-end;
}
.dest-pill{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  color:#fff; opacity:.85;
  transition:opacity .3s ease, transform .3s ease;
}
.dest-pill:hover{ opacity:1; transform:translateY(-5px); }
.dest-pill.is-active{ display:none; }
.dest-pill-label{
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600;
}
.dest-pill-thumb{
  width:230px; height:152px; border-radius:16px;
  background-size:cover; background-position:center;
  box-shadow:0 20px 44px rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.3);
  transition:border-color .3s ease, transform .3s ease;
}
.dest-pill:hover .dest-pill-thumb{ border-color:var(--amber); transform:scale(1.03); }

/* ticket-stub notch on premium cards — the brand motif */
html[data-tier="premium"] .dest-card::before,
html[data-tier="premium"] .blog-card::before,
html[data-tier="premium"] .dest-card::after,
html[data-tier="premium"] .blog-card::after{
  content:''; position:absolute; bottom:64px; width:18px; height:18px;
  background:var(--sand); border-radius:50%; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(11,61,92,.06);
}
html[data-tier="premium"] .dest-card::before,
html[data-tier="premium"] .blog-card::before{ left:-9px; }
html[data-tier="premium"] .dest-card::after,
html[data-tier="premium"] .blog-card::after{ right:-9px; }

/* premium: animated flight-route line behind the destination grid */
.dest-wrap{ position:relative; }
.dest-route{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; }
html[data-tier="premium"] .dest-route{ opacity:.35; }
.dest-route path{ stroke-dasharray:4 10; animation:dash 4s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-160; } }
.dest-grid{ position:relative; z-index:1; }