:root {
      --primary-color: #c89b4b;
      --primary-light: #e4be74;
      --primary-dark: #a67828;
      --secondary-color: #0b1f35;
      --secondary-light: #132f4c;
      --bg-main: #f6f4ef;
      --card-bg: #ffffff;
      --facility-footer-bg: #f3f0e8;
      --text-dark: #0f2236;
      --text-muted: #64748b;
      --hero-overlay-opacity: 0.88;
      --promo-overlay-opacity: 0.94;
      --footer-overlay-opacity: 0.82;
    }

    * {
      box-sizing: border-box;
      user-select: none;
    }

    body {
      font-family: 'Cairo', 'Tajawal', sans-serif;
      background-color: var(--bg-main);
      color: var(--text-dark);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .font-logo-en {
      font-family: 'Montserrat', sans-serif;
      letter-spacing: 0.3px;
    }

    /* Gold Metallic Text Gradient for Hero Title */
    .gold-gradient-text {
      background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-color) 65%, var(--primary-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
    }

    /* Gold Pill Button (Header, Promo, Footer) */
    .btn-gold-light {
      background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-color) 100%);
      color: #1a1610;
      font-weight: 700;
      box-shadow: 0 4px 15px rgba(200, 155, 75, 0.35);
      transition: all 0.25s ease;
    }
    .btn-gold-light:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(200, 155, 75, 0.5);
      filter: brightness(1.05);
    }

    /* Deep Bronze Gold Button (Search Button in Booking Bar) */
    .btn-gold-bronze {
      background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      color: #ffffff;
      font-weight: 700;
      box-shadow: 0 6px 18px rgba(166, 120, 40, 0.35);
      transition: all 0.25s ease;
    }
    .btn-gold-bronze:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(166, 120, 40, 0.5);
      filter: brightness(1.06);
    }

    /* Hero Gradient Overlay matching reference image (Dark navy on Right, clear resort on Left) */
    .hero-gradient-overlay {
      background:
        linear-gradient(180deg, rgba(11, 31, 53, 0.72) 0%, rgba(11, 31, 53, 0.18) 22%, rgba(11, 31, 53, 0.15) 75%, rgba(246, 244, 239, 1) 100%),
        linear-gradient(270deg,
          rgba(11, 31, 53, var(--hero-overlay-opacity)) 0%,
          rgba(11, 31, 53, calc(var(--hero-overlay-opacity) * 0.85)) 36%,
          rgba(11, 31, 53, 0.25) 65%,
          rgba(11, 31, 53, 0.05) 100%);
    }

    /* Promo Banner Gradient (Navy on Right fading to transparent on Left) */
    .promo-gradient-overlay {
      background: linear-gradient(270deg,
        var(--secondary-color) 0%,
        var(--secondary-color) 32%,
        rgba(11, 31, 53, 0.78) 48%,
        rgba(11, 31, 53, 0.12) 72%,
        rgba(11, 31, 53, 0.0) 100%);
    }

    /* Section Header flanking lines */
    .section-line {
      height: 1.5px;
      width: 64px;
      background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
      display: inline-block;
    }
    .section-line-right {
      height: 1.5px;
      width: 68px;
      background: linear-gradient(270deg, rgba(200,155,75,0.2), var(--primary-color));
    }
    .section-line-left {
      height: 1.5px;
      width: 68px;
      background: linear-gradient(90deg, rgba(200,155,75,0.2), var(--primary-color));
    }

    /* Dynamic Card Hover & Styling */
    .room-card {
      background-color: var(--card-bg);
      box-shadow: 0 8px 26px rgba(15, 34, 54, 0.06);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .room-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 32px rgba(15, 34, 54, 0.12);
    }

    .facility-card {
      background-color: var(--facility-footer-bg);
      box-shadow: 0 6px 20px rgba(15, 34, 54, 0.06);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .facility-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(15, 34, 54, 0.12);
    }

    /* =====================================================================
       CREATIVE ZERO-COST ANIMATIONS ENGINE (GPU-Accelerated CSS3)
    ====================================================================== */
    :root {
      --anim-speed-multiplier: 1;
    }

    /* 1. Top Scroll Golden Progress Bar */
    #scroll-progress-bar {
      position: fixed;
      top: 0;
      right: 0;
      height: 3px;
      width: 0%;
      z-index: 100;
      background: linear-gradient(90deg, var(--primary-light), var(--primary-color), #fff4d2);
      box-shadow: 0 0 12px rgba(228, 190, 116, 0.85);
      transition: width 0.08s linear;
      pointer-events: none;
    }

    /* 2. Cinematic Ken Burns Effect on Hero & Promo Backgrounds */
    @keyframes kenBurnsBreath {
      0% {
        transform: scale(1.01) translate3d(0, 0, 0);
      }
      50% {
        transform: scale(1.085) translate3d(-1.2%, -0.8%, 0);
      }
      100% {
        transform: scale(1.01) translate3d(0, 0, 0);
      }
    }
    body.anim-parallax-on .ken-burns-bg {
      animation: kenBurnsBreath calc(22s * var(--anim-speed-multiplier)) ease-in-out infinite;
      will-change: transform;
    }

    /* 3. Metallic Shimmering Gold Hero Title & Twinkling Stars */
    @keyframes goldTextShimmer {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    .gold-gradient-text {
      background: linear-gradient(
        115deg,
        var(--primary-light) 0%,
        var(--primary-color) 30%,
        #fff7df 50%,
        var(--primary-color) 70%,
        var(--primary-dark) 100%
      );
      background-size: 220% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: goldTextShimmer calc(6.5s * var(--anim-speed-multiplier)) ease-in-out infinite;
      filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
    }

    @keyframes starPulseGlow {
      0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(228, 190, 116, 0.3));
        opacity: 0.9;
      }
      50% {
        transform: scale(1.22);
        filter: drop-shadow(0 0 9px rgba(255, 226, 150, 0.95));
        opacity: 1;
      }
    }
    .star-animated {
      display: inline-block;
      animation: starPulseGlow calc(2.6s * var(--anim-speed-multiplier)) ease-in-out infinite;
    }

    /* 4. Liquid Golden Shimmer Sweep on CTA Buttons */
    .btn-gold-light,
    .btn-gold-bronze {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      will-change: transform;
    }
    .btn-gold-light::before,
    .btn-gold-bronze::before {
      content: "";
      position: absolute;
      top: 0;
      left: -120%;
      width: 65%;
      height: 100%;
      background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
      );
      transform: skewX(-25deg);
      animation: buttonLiquidSheen calc(4.2s * var(--anim-speed-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite;
      pointer-events: none;
      z-index: 1;
    }
    @keyframes buttonLiquidSheen {
      0% {
        left: -120%;
      }
      38%, 100% {
        left: 160%;
      }
    }

    /* 5. Staggered Scroll-Reveal & Image Curtain Unveil */
    .reveal-on-scroll {
      opacity: 0;
      transform: translate3d(0, 34px, 0) scale(0.985);
      transition:
        opacity calc(0.75s * var(--anim-speed-multiplier)) cubic-bezier(0.22, 1, 0.36, 1),
        transform calc(0.75s * var(--anim-speed-multiplier)) cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }
    .reveal-on-scroll.is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    /* Image Curtain Shimmer Reveal */
    .curtain-reveal-wrap {
      position: relative;
      overflow: hidden;
    }
    .curtain-reveal-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, var(--secondary-color) 15%, var(--primary-color) 85%, transparent 100%);
      transform: translateX(0%);
      transition: transform calc(0.95s * var(--anim-speed-multiplier)) cubic-bezier(0.77, 0, 0.175, 1);
      transition-delay: var(--reveal-delay, 80ms);
      pointer-events: none;
      z-index: 12;
    }
    .is-visible .curtain-reveal-wrap::after,
    .curtain-reveal-wrap.curtain-opened::after {
      transform: translateX(-105%);
    }

    /* 6. 3D Interactive Card Tilt & Radial Golden Glare */
    .tilt-card-3d {
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
      will-change: transform;
    }
    .tilt-glare-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 15;
      opacity: 0;
      transition: opacity 0.3s ease;
      background: radial-gradient(
        circle 220px at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(228, 190, 116, 0.32),
        rgba(255, 255, 255, 0.12) 45%,
        transparent 80%
      );
      mix-blend-mode: screen;
    }
    body.anim-tilt-on .tilt-card-3d:hover .tilt-glare-layer {
      opacity: 1;
    }

    /* 7. Interactive SVG Amenity Icon Halo & Stroke Animation */
    .amenity-item-card {
      position: relative;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .amenity-item-card:hover {
      transform: translateY(-6px);
    }
    .amenity-icon-halo {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 58px;
      border-radius: 9999px;
      transition: all 0.35s ease;
    }
    .amenity-icon-halo::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 9999px;
      background: radial-gradient(circle, rgba(200, 155, 75, 0.22) 0%, transparent 72%);
      opacity: 0;
      transform: scale(0.7);
      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .amenity-item-card:hover .amenity-icon-halo::before {
      opacity: 1;
      transform: scale(1.25);
    }
    .amenity-item-card:hover svg {
      filter: drop-shadow(0 4px 10px rgba(200, 155, 75, 0.45));
      transform: scale(1.12) rotate(-3deg);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
    }

    /* 8. Floating Ambient Bokeh Orbs in Promo Banner */
    @keyframes floatBokehOrb {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
      }
      50% {
        transform: translate3d(-18px, -12px, 0) scale(1.18);
      }
    }
    .ambient-orb-float {
      animation: floatBokehOrb calc(7s * var(--anim-speed-multiplier)) ease-in-out infinite;
    }

    /* Section Header Animated Expanding Gold Lines */
    .section-line-right,
    .section-line-left {
      transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-on-scroll:hover .section-line-right,
    .reveal-on-scroll:hover .section-line-left {
      width: 96px;
    }

    /* =====================================================================
       9. LUXURY CINEMATIC SPLASH SCREEN (SPLIT ROYAL CURTAIN ARCHITECTURE)
    ====================================================================== */
    #luxury-splash-screen {
      position: fixed;
      inset: 0;
      z-index: 250;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      pointer-events: auto;
    }
    #luxury-splash-screen.splash-hidden {
      display: none !important;
      pointer-events: none !important;
    }

    /* Split Royal Navy Doors */
    .splash-curtain-panel {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50.5%;
      background:
        radial-gradient(circle at center, rgba(200, 155, 75, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, #071220 0%, var(--secondary-color) 50%, #06101d 100%);
      transition: transform 1.05s cubic-bezier(0.77, 0, 0.175, 1);
      will-change: transform;
      z-index: 1;
    }
    .splash-curtain-right {
      right: 0;
      border-left: 1px solid rgba(228, 190, 116, 0.28);
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.45);
    }
    .splash-curtain-left {
      left: 0;
      border-right: 1px solid rgba(228, 190, 116, 0.28);
      box-shadow: 10px 0 40px rgba(0, 0, 0, 0.45);
    }

    #luxury-splash-screen.splash-opening {
      pointer-events: none;
    }
    #luxury-splash-screen.splash-opening .splash-curtain-right {
      transform: translate3d(102%, 0, 0);
    }
    #luxury-splash-screen.splash-opening .splash-curtain-left {
      transform: translate3d(-102%, 0, 0);
    }
    #luxury-splash-screen.splash-opening .splash-center-stage {
      opacity: 0;
      transform: scale(1.08) translateY(-10px);
      transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Ornate Rotating Golden Halo around Splash Emblem */
    @keyframes splashHaloSpin {
      0% {
        transform: rotate(0deg) scale(1);
      }
      50% {
        transform: rotate(180deg) scale(1.04);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }
    .splash-ornate-halo {
      animation: splashHaloSpin 18s linear infinite;
    }

    /* Self-Drawing Golden Lotus SVG Paths */
    @keyframes drawLotusPath {
      0% {
        stroke-dashoffset: 160;
        fill: rgba(228, 190, 116, 0);
      }
      70% {
        stroke-dashoffset: 0;
        fill: rgba(228, 190, 116, 0.08);
      }
      100% {
        stroke-dashoffset: 0;
        fill: rgba(228, 190, 116, 0.18);
      }
    }
    .splash-lotus-svg path {
      stroke-dasharray: 160;
      stroke-dashoffset: 160;
      animation: drawLotusPath 1.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .splash-lotus-svg path:nth-child(2),
    .splash-lotus-svg path:nth-child(3) {
      animation-delay: 0.18s;
    }
    .splash-lotus-svg path:nth-child(4),
    .splash-lotus-svg path:nth-child(5) {
      animation-delay: 0.34s;
    }
    .splash-lotus-svg path:nth-child(6) {
      animation-delay: 0.48s;
    }

    /* Sequential 5-Star Pop Reveal */
    @keyframes splashStarPop {
      0% {
        opacity: 0;
        transform: translateY(10px) scale(0.3) rotate(-25deg);
      }
      70% {
        opacity: 1;
        transform: translateY(-3px) scale(1.25) rotate(6deg);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
      }
    }
    .splash-star-item {
      opacity: 0;
      display: inline-block;
      animation: splashStarPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      filter: drop-shadow(0 0 8px rgba(228, 190, 116, 0.8));
    }

    /* Brand Name Letter-Spacing Expansion */
    @keyframes splashBrandExpand {
      0% {
        opacity: 0;
        letter-spacing: 0.35em;
        transform: translateY(12px);
      }
      100% {
        opacity: 1;
        letter-spacing: 0.08em;
        transform: translateY(0);
      }
    }
    .splash-brand-title-anim {
      animation: splashBrandExpand 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
    }

    /* Arabic Welcome & Tagline Smooth Rise */
    @keyframes splashTextRise {
      0% {
        opacity: 0;
        transform: translateY(16px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .splash-text-rise-1 {
      animation: splashTextRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
    }
    .splash-text-rise-2 {
      animation: splashTextRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
    }

    /* Sticky Glassmorphism Navbar on Scroll & Smooth Section Arrival Pulse */
    #main-navbar-wrapper {
      transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  padding 0.3s ease;
    }
    #main-navbar-wrapper.navbar-scrolled {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: rgba(11, 31, 53, 0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
      border-bottom: 1px solid rgba(228, 190, 116, 0.22);
    }
    #main-navbar-wrapper.navbar-scrolled nav {
      padding-top: 0.65rem;
      padding-bottom: 0.65rem;
    }

    /* Animated Gold Underline for Navbar Links */
    .nav-item-link {
      position: relative;
      padding-bottom: 7px;
      transition: color 0.3s ease, transform 0.25s ease;
    }
    .nav-item-link::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0%;
      height: 2.5px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
      transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 0 10px rgba(228, 190, 116, 0.55);
    }
    .nav-item-link:hover::after,
    .nav-item-link.active-nav::after {
      width: 100%;
    }

    /* Smooth Section Arrival Highlight Animation */
    @keyframes sectionArrivalHighlight {
      0% {
        box-shadow: 0 0 0 0 rgba(200, 155, 75, 0);
        transform: translateY(0);
      }
      35% {
        box-shadow: 0 0 0 6px rgba(228, 190, 116, 0.32), 0 18px 40px rgba(200, 155, 75, 0.18);
        transform: translateY(-3px);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(200, 155, 75, 0);
        transform: translateY(0);
      }
    }
    .section-arrival-pulse {
      animation: sectionArrivalHighlight 1.15s cubic-bezier(0.22, 1, 0.36, 1);
      border-radius: 20px;
    }

    /* Live Edit Mode Visual Indicators */
    body.live-edit-active [data-editable] {
      outline: 1.5px dashed rgba(200, 155, 75, 0.75);
      outline-offset: 4px;
      cursor: pointer;
      position: relative;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    body.live-edit-active [data-editable]:hover {
      outline: 2px solid #e4be74;
      background-color: rgba(200, 155, 75, 0.12);
    }
    body.live-edit-active [data-editable-img] {
      cursor: pointer;
      position: relative;
    }
    body.live-edit-active [data-editable-img]::after {
      content: "📷 اضغط لتغيير الصورة";
      position: absolute;
      inset: 0;
      background: rgba(11, 31, 53, 0.65);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
      z-index: 20;
    }
    body.live-edit-active [data-editable-img]:hover::after {
      opacity: 1;
    }

    /* Custom Scrollbar for CMS Drawer */
    ::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }
    ::-webkit-scrollbar-track {
      background: #0f172a;
    }
    ::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 999px;
    }

    @media (max-width: 768px) {
      .hero-gradient-overlay {
        background: linear-gradient(180deg,
          rgba(11, 31, 53, 0.82) 0%,
          rgba(11, 31, 53, 0.68) 65%,
          rgba(246, 244, 239, 1) 100%);
      }
      .promo-gradient-overlay {
        background: linear-gradient(270deg,
          var(--secondary-color) 0%,
          rgba(11, 31, 53, 0.88) 65%,
          rgba(11, 31, 53, 0.45) 100%);
      }
    }