:root{
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --primary:#8a4e42; --secondary:#506354; --sand:#fbf9f8;
  }
  *{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  html{ scroll-behavior:smooth; }
  body{ background:#fbf9f8; color:#1b1c1c; overflow-x:hidden; cursor:auto; }
  section{ scroll-margin-top:96px; }
  ::selection{ background:rgba(210,138,124,.35); color:#370d06; }

  .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; }
  .display-xl{ font-size:clamp(2.6rem, 6.5vw, 5rem); line-height:1.02; letter-spacing:-0.03em; }
  .display-2{ font-size:clamp(2rem, 4vw, 3.25rem); line-height:1.08; letter-spacing:-0.02em; }

  /* ---------- Atmosphere ---------- */
  .grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .blob{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; will-change:transform; }
  @keyframes drift{ 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.08)} 66%{transform:translate(-30px,25px) scale(.96)} 100%{transform:translate(0,0) scale(1)} }
  .drift{ animation:drift 18s ease-in-out infinite; }
  .drift-slow{ animation:drift 26s ease-in-out infinite; }
  .arch{ position:absolute; border-radius:50% 50% 0 0; pointer-events:none; }
  .mesh{ background:
      radial-gradient(60% 55% at 78% 18%, rgba(210,138,124,.34), transparent 60%),
      radial-gradient(50% 50% at 12% 28%, rgba(183,204,185,.30), transparent 60%),
      radial-gradient(70% 60% at 50% 100%, rgba(255,218,211,.45), transparent 65%); }

  /* ---------- Shadows ---------- */
  .organic-shadow{ box-shadow:0 24px 50px -16px rgba(80,99,84,.16); }
  .soft-shadow{ box-shadow:0 20px 40px -10px rgba(80,99,84,.10); }
  .glass{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

  /* ---------- Reveal system ---------- */
  .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); will-change:transform,opacity; }
  .reveal[data-anim="left"]{ transform:translateX(-46px); }
  .reveal[data-anim="right"]{ transform:translateX(46px); }
  .reveal[data-anim="scale"]{ transform:scale(.92); }
  .reveal[data-anim="blur"]{ filter:blur(12px); }
  .reveal.in{ opacity:1; transform:none; filter:none; }

  .clip-reveal{ clip-path:inset(0 0 100% 0); opacity:0; transition:clip-path 1.1s var(--ease), opacity 1.1s var(--ease); }
  .clip-reveal.in{ clip-path:inset(0 0 0 0); opacity:1; }

  /* hero word stagger */
  .word{ display:inline-block; opacity:0; transform:translateY(120%) rotate(4deg); animation:wordUp 1s var(--ease) forwards; }
  @keyframes wordUp{ to{ opacity:1; transform:translateY(0) rotate(0); } }
  .line-mask{ overflow:hidden; display:block; padding-bottom:.08em; }
  .fade-seq{ opacity:0; transform:translateY(20px); animation:fadeSeq .9s var(--ease) forwards; }
  @keyframes fadeSeq{ to{ opacity:1; transform:none; } }

  /* ---------- Ken Burns / portrait ---------- */
  @keyframes kenburns{ 0%{ transform:scale(1.04); } 100%{ transform:scale(1.13); } }
  .kenburns{ animation:kenburns 16s ease-out forwards alternate infinite; }
  .tilt-card{ transition:transform .5s var(--ease); transform-style:preserve-3d; }

  /* ---------- Marquee ---------- */
  .marquee{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
  .marquee:hover{ animation-play-state:paused; }
  @keyframes marquee{ to{ transform:translateX(-50%); } }

  /* ---------- Pulse ring ---------- */
  @keyframes pulsering{ 0%{ transform:scale(.85); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
  .pulse-ring::before, .pulse-ring::after{ content:""; position:absolute; inset:0; border-radius:9999px; border:1px solid rgba(138,78,66,.5); animation:pulsering 3s var(--ease) infinite; }
  .pulse-ring::after{ animation-delay:1.5s; }

  /* ---------- Timeline ---------- */
  .tl-line{ transform:scaleY(0); transform-origin:top; transition:transform 1.4s var(--ease); }
  .tl-line.in{ transform:scaleY(1); }
  .tl-dot{ transform:scale(0); transition:transform .6s var(--ease) .2s; }
  .tl-dot.in{ transform:scale(1); }

  /* ---------- Buttons ---------- */
  .btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
  .btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,#a25c4d,#8a4e42 55%,#6e372d); transform:translateY(101%); transition:transform .5s var(--ease); }
  .btn-primary:hover::before{ transform:translateY(0); }
  .link-underline{ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .4s var(--ease); }
  .link-underline:hover{ background-size:100% 1px; }

  /* ---------- Scroll progress ---------- */
  #progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:9999; background:linear-gradient(90deg,#506354,#8a4e42,#d28a7c); }

  /* ---------- Nav ---------- */
  .nav-link.active{ color:#8a4e42; }
  .nav-link span.dot{ width:5px; height:5px; border-radius:9999px; background:#8a4e42; transform:scale(0); transition:transform .3s var(--ease); }
  .nav-link.active span.dot{ transform:scale(1); }

  /* mobile menu */
  #mobileMenu{ transition:transform .55s var(--ease), opacity .4s ease; transform:translateY(-12px); }
  #mobileMenu.open{ transform:translateY(0); opacity:1; }

  /* booking steps */
  .step{ transition:opacity .45s var(--ease), transform .45s var(--ease); }
  .step.hidden-step{ display:none; opacity:0; transform:translateY(12px); }

  .float-y{ animation:floaty 6s ease-in-out infinite; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
  .spin-slow{ animation:spin 26s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .reveal,.clip-reveal,.word,.fade-seq{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; }
  }
  .no-scrollbar::-webkit-scrollbar{ display:none; } .no-scrollbar{ scrollbar-width:none; }