/* ============================================
   CHALET THENA — tokens & helpers
   ============================================ */
:root{
  --forest-dark:#06270b; --forest-mid:#5a8062; --forest-soft:#8aa591;
  --cream:#fdfedf; --cream-2:#f4f3d8; --soft-bg:#fafaf6; --line:#e5e5df;
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{ font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--forest-dark); margin:0; line-height:1.5; }

/* Smooth scrolling (offset so anchor targets clear the sticky header) */
html{ scroll-padding-top:110px; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
.font-display{ font-family:'Julius Sans One',serif; font-weight:400; }

/* Gradient fallback if a photo is missing */
.ph{ background:linear-gradient(135deg,var(--forest-soft) 0%,var(--forest-mid) 55%,var(--forest-dark) 100%); }
.ph-soft{ background:linear-gradient(135deg,var(--cream-2) 0%,var(--forest-soft) 100%); }

/* Language dropdown */
.lang-menu{ display:none; }
.lang-menu.open{ display:block; }

/* Date inputs */
input[type="date"]{ appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer; }
input[type="date"].text-cream{ color-scheme:dark; }
input[type="date"].text-cream::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(1.4); opacity:.7; }

/* FAQ accordion */
.faq-panel{ display:none; }
.faq-item.open .faq-panel{ display:block; }
.faq-item.open .faq-plus{ transform:rotate(45deg); }
.faq-plus{ transition:transform .2s ease; }

/* Scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--soft-bg); }
::-webkit-scrollbar-thumb{ background:var(--forest-soft); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--forest-mid); }

/* ============================================
   Loading & scroll-reveal animations
   Reduced-motion safe; the hidden state needs .js-anim
   (added by JS) so content is never hidden if JS is off.
   ============================================ */

/* Header lifts subtly once the page is scrolled (not motion-dependent) */
header{ transition: box-shadow .35s ease, backdrop-filter .35s ease; }
header.is-scrolled{ box-shadow:0 1px 0 rgba(6,39,11,.05), 0 14px 34px -24px rgba(6,39,11,.5); }

@media (prefers-reduced-motion: no-preference){

  /* One reveal system, several variants (JS assigns data-anim).
     Premium easing (ease-out-expo-ish) for a slow, expensive feel. */
  .js-anim .reveal{
    opacity:0;
    transition: opacity .85s cubic-bezier(.16,1,.3,1),
                transform .85s cubic-bezier(.16,1,.3,1),
                clip-path .95s cubic-bezier(.16,1,.3,1),
                filter .85s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
  }
  .js-anim .reveal[data-anim="up"]{ transform:translateY(32px); }
  .js-anim .reveal[data-anim="heading"]{ transform:translateY(38px); filter:blur(7px); }
  .js-anim .reveal[data-anim="left"]{ transform:translateX(-54px); }
  .js-anim .reveal[data-anim="right"]{ transform:translateX(54px); }
  .js-anim .reveal[data-anim="image"]{ clip-path:inset(0 0 100% 0); transform:scale(1.06); }
  .js-anim .reveal.is-visible{ opacity:1; transform:none; clip-path:inset(0 0 0 0); filter:none; }

  /* Hero — slow zoom-settle on the full-bleed background */
  section > .ph.absolute{ animation:chalet-kenburns 1.8s cubic-bezier(.16,1,.3,1) both; }
  @keyframes chalet-kenburns{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

  /* Button hover: lift + soft shadow + a sheen that sweeps across.
     Excludes the logo link (it contains an <img>). */
  a.inline-flex:not(:has(img)), button.inline-flex{
    position:relative; overflow:hidden;
    transition: transform .28s cubic-bezier(.16,1,.3,1), background-color .3s ease, color .3s ease, box-shadow .3s ease;
  }
  a.inline-flex:not(:has(img)):hover, button.inline-flex:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px -14px rgba(6,39,11,.55);
  }
  a.inline-flex:not(:has(img))::after, button.inline-flex::after{
    content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; pointer-events:none;
    background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
    transform:skewX(-18deg); transition:left .6s cubic-bezier(.16,1,.3,1);
  }
  a.inline-flex:not(:has(img)):hover::after, button.inline-flex:hover::after{ left:150%; }
}

/* ============================================
   Full-screen mobile menu
   ============================================ */
.mobile-menu{ opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease; }
.mobile-menu.is-open{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }
@media (prefers-reduced-motion: no-preference){
  .mobile-menu .mm-item{
    opacity:0; transform:translateY(22px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  }
  .mobile-menu.is-open .mm-item{ opacity:1; transform:none; }
}

/* ============================================
   Image placeholders (dimension tiles)
   Shown wherever no real photo is bundled; JS fills .ph-dim with the
   element's rendered W × H so the slot size is always visible.
   ============================================ */
.ph{ background-color:#e9e9e2; }
.ph:not(.absolute){ position:relative; }
.ph.is-placeholder::before{
  content:""; position:absolute; inset:10px; border:1px dashed rgba(6,39,11,.20);
  border-radius:2px; pointer-events:none;
}
.ph-dim{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font:500 13px/1 ui-sans-serif,system-ui,-apple-system,sans-serif; letter-spacing:.08em;
  color:rgba(6,39,11,.42); pointer-events:none; white-space:nowrap;
}

/* ============================================
   Failsafe — background photos are NEVER hidden
   Wins even if a stale/old main.js or styles.css is cached on the
   server and tries to keep a .ph image at opacity:0 (the "appears
   then disappears" bug). Kept separate so it's easy to find.
   ============================================ */
.ph,
.js-anim .ph,
.js-anim .ph.reveal,
.js-anim .reveal.ph,
.ph.reveal:not(.is-visible) {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  filter: none !important;
}