/* ============================================================
   LA CASA — shared design system
   Neutral foundation + per-brand accent themes
   ============================================================ */

:root{
  /* shared neutrals */
  --c-ink:        #1C2109;
  --c-ivory:      #F8F5F1;

  /* brand defaults — warm organic foundation */
  --c-bg:         #F0E6DA;   /* warm linen    */
  --c-bg-2:       #FAF4EE;   /* warm off-white */
  --c-accent:     #415B06;   /* deep olive    */
  --c-accent-2:   #6B8B10;   /* lighter olive */
  --c-deep:       #1E2D03;   /* very dark olive — dark sections */

  --c-line:       rgba(28,33,9,.18);
  --c-line-soft:  rgba(28,33,9,.10);
  --c-veil:       rgba(28,33,9,.55);

  --f-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-sans:  'Inter', Helvetica, Arial, sans-serif;

  --pad-x: clamp(20px, 4vw, 64px);
  --max:   1640px;

  --t-fast: .4s cubic-bezier(.2,.6,.2,1);
  --t-med:  .9s cubic-bezier(.2,.6,.2,1);
}

/* ---- per-brand theme overrides ---- */
[data-theme="casa"]{
  --c-bg:#F0E6DA; --c-bg-2:#FAF4EE;
  --c-accent:#415B06; --c-accent-2:#6B8B10; --c-deep:#1E2D03;
  --c-ink:#1C2109;
  --c-line:rgba(28,33,9,.18); --c-line-soft:rgba(28,33,9,.10);
  --c-veil:rgba(28,33,9,.55);
}
[data-theme="sevan"]{
  /* Warm base unifies the collection; lake-blue accent preserves Sevan's water identity */
  --c-bg:#F0E6DA; --c-bg-2:#FAF4EE;
  --c-accent:#1E8193; --c-accent-2:#5BA8C0; --c-deep:#0A3040;
  --c-ink:#172530;
  --c-line:rgba(23,37,48,.14); --c-line-soft:rgba(23,37,48,.08);
  --c-veil:rgba(16,28,40,.45);
}
[data-theme="bike"]{
  --c-bg:#F0E6DA; --c-bg-2:#FAF4EE;
  --c-accent:oklch(.57 .145 45); --c-accent-2:oklch(.69 .135 65); --c-deep:oklch(.30 .07 45);
  --c-ink:#231A12;
  --c-line:rgba(35,26,18,.18); --c-line-soft:rgba(35,26,18,.10);
  --c-veil:rgba(35,22,12,.5);
}
[data-theme="hub"]{
  --c-bg:#F0E6DA; --c-bg-2:#FAF4EE;
  --c-accent:#415B06; --c-accent-2:#6B8B10; --c-deep:#1E2D03;
  --c-ink:#1C2109;
  --c-line:rgba(28,33,9,.18); --c-line-soft:rgba(28,33,9,.10);
  --c-veil:rgba(28,33,9,.55);
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-sans);font-weight:300;line-height:1.4;letter-spacing:-.005em}
body{overflow-x:hidden}
img{display:block;max-width:100%;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
::selection{background:var(--c-accent);color:var(--c-ivory)}

/* ---------- accessibility: keyboard focus + skip link ----------
   Visible focus ring only for keyboard users (:focus-visible), so mouse
   clicks stay clean. High-contrast ring works on light and dark sections. */
:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px;border-radius:2px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #1E8193;outline-offset:3px}
/* On dark surfaces (header over hero, dark sections) use an ivory ring. */
.header a:focus-visible,.header button:focus-visible,
.gw-panel:focus-visible,.dest a:focus-visible,.site-foot a:focus-visible{outline-color:#F8F5F1}
/* Skip-to-content link — hidden until focused, then pinned top-left. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:5000;
  background:var(--c-ink);color:var(--c-ivory);padding:12px 18px;border-radius:8px;
  font-family:var(--f-sans);font-size:13px;letter-spacing:.04em;font-weight:500;
  transition:top .25s ease;text-decoration:none}
.skip-link:focus{top:12px}

/* film grain — shared cinematic texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;mix-blend-mode:multiply;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
[data-theme="hub"] body::before{mix-blend-mode:multiply;opacity:.04}
[data-theme="casa"] body::before{mix-blend-mode:multiply;opacity:.04}
[data-theme="sevan"] body::before{opacity:0}

/* ---------- brand word colours (global) ---------- */
/* Every occurrence of "Forest" / "Lake" across the whole collection is
   tinted with these two signature tones — applied via .w-forest / .w-lake
   spans (injected by the i18n colouriser, and present in static markup). */
/* Forest = deep olive; Lake = rich Sevan teal
   Applied to .w-forest / .w-lake spans on designated elements only.
   The JS colorizer runs only on elements marked data-colorize-brand. */
.w-forest{color:#415B06}
.w-lake{color:#1E8193}

/* ---------- type scale ---------- */
.eyebrow{font-family:var(--f-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--c-ink);opacity:.7}
.h-display{font-family:var(--f-serif);font-weight:300;line-height:.92;letter-spacing:-.02em;font-size:clamp(54px,11vw,188px)}
.h-display em{font-style:italic;color:var(--c-accent-2);font-weight:300}
.h-1{font-family:var(--f-serif);font-weight:300;line-height:.96;letter-spacing:-.015em;font-size:clamp(40px,6.4vw,110px)}
.h-1 em{font-style:italic;color:var(--c-accent);font-weight:300}
.h-2{font-family:var(--f-serif);font-weight:300;line-height:1;letter-spacing:-.015em;font-size:clamp(30px,3.6vw,56px)}
.h-2 em{font-style:italic;color:var(--c-accent)}
.p-lede{font-size:clamp(15px,1.15vw,19px);line-height:1.55;max-width:62ch;font-weight:300;color:var(--c-ink)}
.p-meta{font-family:var(--f-sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;opacity:.55}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
.section{position:relative;padding:clamp(80px,12vw,180px) 0}
.divider{height:1px;background:var(--c-line);width:100%}

/* ---------- BUTTON SYSTEM ---------- */
.btn{
  --btn-bg:var(--c-ink); --btn-fg:var(--c-bg-2); --btn-hover:var(--c-accent-2); --btn-hover-fg:var(--c-ivory);
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:18px 30px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  position:relative;overflow:hidden;
  transition:color .55s cubic-bezier(.2,.7,.1,1),transform .55s cubic-bezier(.2,.7,.1,1),box-shadow .55s ease;
  will-change:transform;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--btn-hover);transform:translateY(101%);transition:transform .65s cubic-bezier(.2,.7,.1,1);z-index:0}
.btn:hover{color:var(--btn-hover-fg);transform:translateY(-1px);box-shadow:0 14px 36px -22px rgba(20,18,16,.55)}
.btn:hover::before{transform:translateY(0)}
.btn>*{position:relative;z-index:1}
.btn .arrow{transform:translateX(0);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.btn:hover .arrow{transform:translateX(5px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--c-ink);--btn-hover:var(--c-ink);--btn-hover-fg:var(--c-ivory);border:1px solid var(--c-line)}
.btn--light{--btn-bg:var(--c-ivory);--btn-fg:var(--c-ink);--btn-hover:var(--c-accent-2);--btn-hover-fg:var(--c-ivory)}
.btn--accent{--btn-bg:var(--c-accent);--btn-fg:var(--c-ivory);--btn-hover:var(--c-accent-2);--btn-hover-fg:var(--c-ivory)}
.btn--on-dark{--btn-bg:transparent;--btn-fg:var(--c-ivory);--btn-hover:var(--c-accent-2);--btn-hover-fg:var(--c-ivory);border:1px solid rgba(248,245,241,.4)}

/* ---------- HEADER ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:22px var(--pad-x);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  color:var(--c-ivory);
  transition:color .5s ease,background-color .5s ease,padding .5s ease;
}
/* When header is transparent (at top): always #F8F5F1 ivory, no blend tricks.
   mix-blend-mode:normal ensures the color renders exactly as specified. */
.header .brand,.header .nav{mix-blend-mode:normal;color:var(--c-ivory)}
.header.is-solid{
  background:color-mix(in srgb,var(--c-bg) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--c-ink);border-bottom:1px solid var(--c-line);padding-top:16px;padding-bottom:16px;
}
.header.is-solid .brand,.header.is-solid .nav{color:var(--c-ink)}
/* Hub page: gateway is dark — ivory text reads correctly.
   Once solid, switch to ink like all other pages. */
[data-theme="hub"] .header{color:var(--c-ivory)}
[data-theme="hub"] .header .brand,[data-theme="hub"] .header .nav{color:var(--c-ivory)}
[data-theme="hub"] .header.is-solid{background:color-mix(in srgb,var(--c-bg) 92%,transparent);color:var(--c-ink);border-bottom-color:var(--c-line)}
[data-theme="hub"] .header.is-solid .brand,[data-theme="hub"] .header.is-solid .nav{color:var(--c-ink)}
.brand{font-family:var(--f-serif);font-weight:400;font-size:26px;letter-spacing:.01em;line-height:1;display:inline-flex;align-items:baseline;gap:9px}
.brand .brand-sub{font-family:var(--f-sans);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;opacity:.6}
.nav{display:flex;justify-content:center;gap:34px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.nav a{position:relative;padding:6px 0;transition:opacity .4s ease;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.header-right{display:flex;justify-content:flex-end;align-items:center;gap:16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

@media (max-width:980px){.nav{display:none}.header{grid-template-columns:1fr auto}}

/* ---------- LANGUAGE SWITCHER (11 languages, refined popover) ---------- */
.lang{position:relative}
.lang-toggle{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(248,245,241,.34);border-radius:999px;
  padding:8px 13px 8px 12px;line-height:1;
  background:rgba(20,18,16,.26);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  font-family:var(--f-sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--c-ivory);
  transition:border-color .4s cubic-bezier(.2,.7,.1,1),background .4s cubic-bezier(.2,.7,.1,1),transform .4s cubic-bezier(.2,.7,.1,1);
}
.lang-toggle:hover{border-color:rgba(248,245,241,.62);background:rgba(20,18,16,.36)}
.lang.is-open .lang-toggle{border-color:rgba(248,245,241,.62)}
.lang-toggle .globe{width:14px;height:14px;opacity:.9;flex:0 0 auto}
.lang-toggle .lang-cur{font-variant-numeric:tabular-nums}
.lang-toggle .chev{width:10px;height:10px;opacity:.75;flex:0 0 auto;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.lang.is-open .lang-toggle .chev{transform:rotate(180deg)}
/* hub opens on the dark gateway → ivory (#F8F5F1) chip at the top, same as
   every other page's transparent header. */
[data-theme="hub"] .lang-toggle{background:rgba(20,18,16,.26);border-color:rgba(248,245,241,.34);color:var(--c-ivory)}
[data-theme="hub"] .lang-toggle:hover{border-color:rgba(248,245,241,.62);background:rgba(20,18,16,.36)}
/* Once scrolled (header solid), the language button keeps the existing
   ink/accent-on-light styling — higher specificity wins over the transparent
   rules above, on hub and sub-pages alike. */
.header.is-solid .lang-toggle{border-color:var(--c-line);background:color-mix(in srgb,var(--c-bg-2) 60%,transparent);color:var(--c-accent)}
.header.is-solid .lang-toggle:hover{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-bg-2) 80%,transparent)}

.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  width:248px;padding:8px;
  background:color-mix(in srgb,var(--c-bg-2) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--c-ink) 10%,transparent);border-radius:18px;
  box-shadow:0 24px 60px -28px rgba(15,12,8,.45),0 2px 8px -4px rgba(15,12,8,.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  color:var(--c-ink);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;pointer-events:none;
  transition:opacity .42s cubic-bezier(.2,.7,.1,1),transform .42s cubic-bezier(.2,.7,.1,1);
}
.lang.is-open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu button{
  display:flex;align-items:center;gap:9px;justify-content:flex-start;
  padding:11px 13px;border-radius:11px;text-align:left;width:100%;
  font-family:var(--f-sans);font-weight:400;color:var(--c-ink);
  transition:background .32s cubic-bezier(.2,.7,.1,1),color .32s ease;
}
.lang-menu button .code{font-size:9.5px;letter-spacing:.14em;font-weight:600;opacity:.42;min-width:22px;text-transform:uppercase;transition:opacity .32s ease,color .32s ease}
.lang-menu button .name{font-size:13.5px;letter-spacing:0;line-height:1.1}
.lang-menu button:hover{background:color-mix(in srgb,var(--c-accent) 12%,transparent)}
.lang-menu button:hover .code{opacity:.7}
.lang-menu button.is-on{background:var(--c-accent);color:var(--c-ivory)}
.lang-menu button.is-on .code{opacity:.8;color:var(--c-ivory)}

@media (max-width:520px){
  .lang-menu{
    position:fixed;left:var(--pad-x);right:var(--pad-x);top:auto;width:auto;
    grid-template-columns:1fr 1fr;transform-origin:top center;
    transform:translateY(-6px) scale(.98);
  }
  .lang.is-open .lang-menu{transform:none}
}

/* RTL support (Arabic) */
[dir="rtl"] .nav,[dir="rtl"] .header-right{direction:rtl}
[dir="rtl"] .lang-menu{right:auto;left:0;transform-origin:top left}
[dir="rtl"] .btn .arrow{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(5px)}

/* ---------- PAGE TRANSITION CURTAIN ---------- */
.page-curtain{
  position:fixed;inset:0;z-index:3000;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:var(--c-deep);
  transform:translateY(0);
  will-change:transform;
}
.page-curtain.is-up{transform:translateY(-100%);transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
.page-curtain.is-down{transform:translateY(0);transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
/* Themed FX layers (forest/water/motion/journey) sit behind the brand text.
   Default: invisible. They become visible only when .show-mark is set on the
   curtain — i.e. only during the destination's intro. During outro the FX is
   hidden so animations from a previous theme can never overlap. */
.page-curtain .pc-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;will-change:opacity,transform}
.page-curtain.show-mark .pc-fx{opacity:1}
/* Outro: neutral fade. Source page's FX go to opacity:0 before the curtain
   even finishes sliding in, and the curtain itself switches to a neutral
   dark wash that matches what the destination starts on — preventing any
   visible colour seam at the moment of navigation. */
.page-curtain.outro{background:#14110b !important;transition:background .25s ease-out !important}
.page-curtain.outro .pc-fx,.page-curtain.outro .pc-mark,.page-curtain.outro .pc-sub{opacity:0 !important;animation:none !important;transition:opacity .14s ease-out !important}
.page-curtain.outro::before,.page-curtain.outro::after{display:none}
/* Block all pointer events while we're navigating */
html.is-leaving{pointer-events:none;cursor:wait}
.page-curtain .pc-mark,.page-curtain .pc-sub{position:relative;z-index:2}
.page-curtain .pc-mark{
  font-family:var(--f-serif);font-style:italic;font-weight:300;font-size:clamp(34px,6vw,76px);
  color:var(--c-ivory);opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.1,1);
}
.page-curtain.show-mark .pc-mark{opacity:.92;transform:none}
.page-curtain .pc-sub{font-family:var(--f-sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--c-ivory);opacity:0;transition:opacity .7s ease .1s}
.page-curtain.show-mark .pc-sub{opacity:.5}

/* ---------- LAKE SEVAN cinematic transition ----------------------------
   A bespoke portal layered ABOVE the standard page curtain. Triggered when
   the user clicks an <a data-transition data-sevan-transition> link (the
   Lake Sevan gateway panel on the hub). Sequence:
     0.00s  sky gradient fades in (eef8fa → 4791ad)
     0.20s  sun rises and scales up
     0.30s  five wind streaks sweep horizontally
     0.40s  seven birds fly across the frame, wings flapping
     0.50s  water rises from the base
     1.25s  kicker fades in
     1.30s  "Lake Sevan Hostel" title blooms in with blur-to-focus
     3.00s  navigation fires (set by motion.js)
   The whole sequence is purely CSS once a class is added by JS — no GSAP
   timeline needed, which keeps the transition resilient if scripts fail. */
#sevan-portal{position:fixed;inset:0;z-index:3500;overflow:hidden;opacity:0;pointer-events:none}
#sevan-portal.is-on{pointer-events:auto;animation:spFade .55s ease forwards}
@keyframes spFade{to{opacity:1}}
#sevan-portal .sp-sky{position:absolute;inset:0;background:linear-gradient(178deg,#eef8fa 0%,#d2ecf1 26%,#a9d9e4 46%,#74b6cb 66%,#4791ad 100%);transform:scale(1.05)}
#sevan-portal.is-on .sp-sky{animation:spSky 3s ease forwards}
@keyframes spSky{to{transform:scale(1)}}
#sevan-portal .sp-sun{position:absolute;top:14%;left:50%;width:min(42vw,460px);height:min(42vw,460px);border-radius:50%;
  transform:translateX(-50%) scale(.6);opacity:0;
  background:radial-gradient(circle,rgba(255,253,247,.95) 0%,rgba(255,249,235,.5) 30%,rgba(255,249,235,0) 64%)}
#sevan-portal.is-on .sp-sun{animation:spSun 2.2s cubic-bezier(.2,.7,.1,1) .2s forwards}
@keyframes spSun{to{opacity:1;transform:translateX(-50%) scale(1)}}
/* wind streaks — five horizontal lines of light sweeping across the sky */
#sevan-portal .sp-wind{position:absolute;inset:0;overflow:hidden}
#sevan-portal .sp-wind i{position:absolute;left:-30%;height:2px;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);opacity:0}
#sevan-portal.is-on .sp-wind i{animation:spWind 2.6s cubic-bezier(.3,.5,.2,1) infinite}
#sevan-portal .sp-wind i:nth-child(1){top:30%;animation-delay:.0s}
#sevan-portal .sp-wind i:nth-child(2){top:44%;width:55%;animation-delay:.4s}
#sevan-portal .sp-wind i:nth-child(3){top:56%;width:35%;animation-delay:.2s}
#sevan-portal .sp-wind i:nth-child(4){top:66%;width:48%;animation-delay:.7s}
#sevan-portal .sp-wind i:nth-child(5){top:38%;width:30%;animation-delay:1.1s}
@keyframes spWind{0%{transform:translateX(0);opacity:0}20%{opacity:.8}100%{transform:translateX(220%);opacity:0}}
/* birds — white silhouettes flying left-to-right with wings flapping */
#sevan-portal .sp-birds{position:absolute;inset:0}
#sevan-portal .sp-bird{position:absolute;left:-12%;color:rgba(255,255,255,.9);opacity:0;will-change:transform;animation:spFly linear forwards}
#sevan-portal .sp-bird svg{display:block}
#sevan-portal .sp-bird svg path{animation:spFlap .42s ease-in-out infinite}
@keyframes spFly{0%{transform:translate(0,10px) scale(.9);opacity:0}12%{opacity:.9}80%{opacity:.9}100%{transform:translate(125vw,-60px) scale(1.05);opacity:0}}
@keyframes spFlap{0%,100%{d:path('M2 12 C8 4 14 4 20 9 C26 4 32 4 38 12')}50%{d:path('M2 9 C8 12 14 12 20 7 C26 12 32 12 38 9')}}
/* water rising from the bottom of the screen */
#sevan-portal .sp-water{position:absolute;left:0;right:0;bottom:0;height:0;overflow:hidden}
#sevan-portal.is-on .sp-water{animation:spWaterRise 2s cubic-bezier(.2,.7,.1,1) .5s forwards}
@keyframes spWaterRise{to{height:34%}}
#sevan-portal .sp-water span{position:absolute;left:-10%;width:120%;bottom:0;height:100%;
  background:linear-gradient(180deg,rgba(73,145,173,.5),rgba(40,100,128,.85));}
#sevan-portal .sp-water span:nth-child(2){opacity:.5;border-radius:42% 38% 0 0/30px 26px 0 0;animation:spWater 5s ease-in-out infinite}
@keyframes spWater{0%,100%{transform:translateX(0)}50%{transform:translateX(4%)}}
#sevan-portal .sp-shimmer{position:absolute;left:0;right:0;bottom:0;height:34%;mix-blend-mode:screen;opacity:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 2px,transparent 2px 11px);background-size:100% 200px}
#sevan-portal.is-on .sp-shimmer{animation:spShimmer 6s linear infinite,spShimFade 1.4s ease .9s forwards}
@keyframes spShimFade{to{opacity:.55}}
@keyframes spShimmer{from{background-position:0 0}to{background-position:0 200px}}
/* destination title — blooms in over the finished landscape */
#sevan-portal .sp-title{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 24px}
#sevan-portal .sp-kick{font-family:var(--f-sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;color:#0e2b38;opacity:0}
#sevan-portal.is-on .sp-kick{animation:spKick .8s ease 1.25s forwards}
@keyframes spKick{to{opacity:.7}}
#sevan-portal .sp-name{font-family:var(--f-serif);font-weight:300;font-size:clamp(40px,7vw,104px);line-height:1;letter-spacing:-.02em;color:#0e2b38;opacity:0;transform:translateY(18px);filter:blur(10px)}
#sevan-portal.is-on .sp-name{animation:spName 1.1s cubic-bezier(.2,.7,.1,1) 1.3s forwards}
@keyframes spName{to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- reveal helpers ---------- */
.rev{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.rev.is-on{opacity:1;transform:none}
.rev-d2{transition-delay:.08s}.rev-d3{transition-delay:.16s}.rev-d4{transition-delay:.24s}.rev-d5{transition-delay:.32s}
.clip-rev{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:clip-path 1.2s cubic-bezier(.2,.6,.2,1)}
.clip-rev.is-on{clip-path:polygon(0 0%,100% 0%,100% 100%,0 100%)}
.split-line{overflow:hidden;display:block}
.split-char{display:inline-block;transform:translateY(101%);will-change:transform}
.no-scroll{overflow:hidden}

/* ---------- shared footer ---------- */
.site-foot{background:var(--c-deep);color:var(--c-ivory);padding:clamp(60px,8vw,110px) 0 40px;position:relative;overflow:hidden}
.site-foot .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:60px;align-items:start;position:relative;z-index:1}
.site-foot .foot-brand .m{font-family:var(--f-serif);font-size:clamp(30px,3.4vw,52px);font-weight:300;line-height:1;letter-spacing:.01em}
.site-foot .foot-brand .m em{font-style:italic;color:var(--c-accent-2)}
.site-foot .foot-brand p{font-size:14px;line-height:1.7;opacity:.7;max-width:42ch;margin:20px 0 0}
.site-foot .foot-col h5{font-family:var(--f-sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;opacity:.45;margin:0 0 20px}
.site-foot .foot-col a,.site-foot .foot-col span{display:block;font-family:var(--f-serif);font-weight:300;font-size:19px;line-height:1.9;opacity:.85;transition:opacity .35s ease,padding-left .45s cubic-bezier(.2,.7,.1,1)}
.site-foot .foot-col a:hover{opacity:1;padding-left:8px;color:var(--c-accent-2)}
.site-foot .foot-line{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(50px,7vw,90px);padding-top:30px;border-top:1px solid rgba(248,245,241,.16);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;opacity:.5;flex-wrap:wrap}
@media (max-width:860px){.site-foot .foot-grid{grid-template-columns:1fr;gap:40px}}

/* prefers reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  .rev{opacity:1;transform:none}
}

/* ============================================================
   PROFESSIONAL RESPONSIVE LAYER
   Mobile-first overrides for every shared component.
   - Tap targets ≥44px on touch devices (Apple HIG / Material)
   - Disable hover-only side-effects on touch
   - Tighten section padding rhythm on phones
   - Prevent horizontal scroll & typography overflow
   - Reduce animation complexity on small screens & low-power devices
   ============================================================ */

/* Global safety: clip horizontal overflow at the root */
html,body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg,video{max-width:100%;height:auto}
/* All long words wrap rather than blow out layout (URLs, brand names with no-break spaces) */
p,h1,h2,h3,h4,h5,h6,span,a{overflow-wrap:break-word}

/* iOS Safari: respect the safe-area inset for fixed headers */
.header{padding-left:max(var(--pad-x), env(safe-area-inset-left));padding-right:max(var(--pad-x), env(safe-area-inset-right))}

/* Tap targets: every interactive primitive a thumb can reach is ≥44px tall */
@media (hover:none) and (pointer:coarse){
  .btn{padding:18px 28px;min-height:48px}
  .nav a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .lang-toggle{padding:11px 14px;min-height:44px}
  .lang-menu button{padding:14px 14px;min-height:48px}
  .header-right{gap:12px}
  /* Touch devices: disable hover-only enrichments */
  .btn:hover{transform:none}
  .nav a::after{display:none}
  /* Hover lift on cards becomes a soft static elevation */
  .lh-room:hover,.bk-card:hover,.lh-plat:hover,.lh-gi:hover,.plat:hover{transform:none}
}

/* ---------- TABLET ≤ 1024px ---------- */
@media (max-width:1024px){
  .header{padding-top:18px;padding-bottom:18px}
  .nav{gap:24px;font-size:11.5px}
}

/* ---------- TABLET / SMALL LAPTOP ≤ 900px ---------- */
@media (max-width:900px){
  .header{grid-template-columns:auto 1fr;gap:16px}
  .nav{display:none}             /* nav hides — brand + lang switcher remain */
  .header-right{justify-self:end}

  /* Section spacing tightened so vertical rhythm doesn't feel airy */
  .section{padding:clamp(64px,10vw,110px) 0}

  /* Footer becomes single-column with comfortable gutters */
  .site-foot .foot-grid{grid-template-columns:1fr;gap:36px}
  .site-foot .foot-line{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- MOBILE ≤ 640px ---------- */
@media (max-width:640px){
  :root{--pad-x:18px}

  /* Type scale: ensure the smallest device gets readable sizes */
  .h-display{font-size:clamp(40px, 11vw, 64px);line-height:.95}
  .h-1{font-size:clamp(32px, 8vw, 52px);line-height:1.02}
  .h-2{font-size:clamp(24px, 6.5vw, 38px)}
  .p-lede{font-size:16px;line-height:1.65}

  .brand{font-size:22px}
  .brand .brand-sub{font-size:8.5px;letter-spacing:.3em}
  .header{padding-top:14px;padding-bottom:14px}

  /* Buttons fully fill width comfortably on phones */
  .btn{padding:16px 24px;font-size:11px;letter-spacing:.16em}

  /* Section padding rhythm */
  .section{padding:56px 0}

  /* Language menu: full-width drawer-like behaviour */
  .lang-menu{
    position:fixed;top:auto;bottom:18px;left:18px;right:18px;width:auto;
    grid-template-columns:1fr 1fr;
    transform-origin:bottom center;
    box-shadow:0 -24px 60px -24px rgba(15,12,8,.4);
  }

  /* Page curtain mark scales down */
  .page-curtain .pc-mark{font-size:clamp(28px,9vw,52px)}
  .page-curtain .pc-sub{font-size:9px;letter-spacing:.32em}

  /* Reveals are quicker on mobile — feels more responsive */
  .rev{transition-duration:.7s}
}

/* ---------- ULTRA SMALL ≤ 380px ---------- */
@media (max-width:380px){
  .h-display{font-size:36px}
  .h-1{font-size:30px}
  .brand{font-size:20px}
  .brand .brand-sub{display:none}
}

/* ---------- ULTRA-WIDE ≥ 1800px ---------- */
@media (min-width:1800px){
  :root{--max:1760px}
}

/* ---------- ANIMATION PERF ON MOBILE ---------- */
@media (max-width:760px){
  /* Curtain FX layers can be expensive on phones. Reduce their density. */
  .page-curtain .pc-fx{filter:none !important}
  /* Disable heavy backdrop blurs that thrash compositors on lower-end devices */
  .lang-toggle,.lang-menu{backdrop-filter:none;-webkit-backdrop-filter:none}
  .glass{backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
  /* Parallax: lighter on mobile (override per-page where needed via JS) */
  [data-pl],[data-atmos]{will-change:auto}
}

/* ---------- LOW POWER / SLOW CONNECTION HINT ---------- */
@media (prefers-reduced-data:reduce){
  body::before{display:none}   /* drop film grain on data-saver mode */
}