/* =========================================================
   UNICO — RICCIONE
   Contemporary Luxury / Minimal — Black · White · Gold
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --c-black:      #0A0A0A;
  --c-black-2:    #101010;
  --c-black-3:    #161513;
  --c-white:      #F4F1EA;
  --c-white-dim:  #C9C6BE;
  --c-gold:       #C6A868;
  --c-gold-soft:  #C6A86833;
  --c-gold-line:  #C6A86855;
  --c-line:       #FFFFFF1A;

  /* day-to-night runtime var, set by JS */
  --daynight-bg: var(--c-black);
  --daynight-accent: var(--c-gold);

  /* --- Type --- */
  --f-display: 'Marcellus', 'Times New Roman', serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1320px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

::selection{ background: var(--c-gold-soft); color: var(--c-white); }

:focus-visible{
  outline: 1px solid var(--c-gold);
  outline-offset: 4px;
}

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow{
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 500;
}

.section-heading{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-white);
  margin: 18px 0 0;
}

.section-body{
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--c-white-dim);
  line-height: 1.75;
  max-width: 640px;
  font-weight: 300;
}

.divider{
  width: 48px;
  height: 1px;
  background: var(--c-gold-line);
  border:none;
  margin: 28px 0;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(10,10,10,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}
.brand-mark{
  display: inline-block;
  background: linear-gradient(120deg,
    #7A5B27 0%,
    #E8CC85 14%,
    #B4863C 30%,
    #F6E4B0 42%,
    #8C6A2E 56%,
    #EFD79A 70%,
    #9C7935 84%,
    #E3C583 100%);
  background-size: 220% 100%;
  -webkit-mask-image: url("../assets/logo-mask.png");
  mask-image: url("../assets/logo-mask.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: brandShimmer 9s linear infinite;
}
@keyframes brandShimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .brand-mark{ animation: none; background-position: 40% 50%; }
}

.nav__logo{
  height: 20px;
  width: auto;
  aspect-ratio: 2.961 / 1;
  opacity: 0;
  transition: opacity .2s linear;
}
.nav__logo.is-visible{ opacity: 1; }
.nav__links{
  display:flex;
  gap: 36px;
  align-items:center;
}
.nav__links a{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white-dim);
  transition: color .25s var(--ease);
  position: relative;
}
.nav__links a:hover{ color: var(--c-white); }
.nav__right{
  display:flex;
  align-items:center;
  gap: 22px;
}
.lang-switch{
  display:flex;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-white-dim);
}
.lang-switch button{
  background:none;
  border:none;
  color: inherit;
  padding: 2px 4px;
}
.lang-switch button.is-active{ color: var(--c-gold); }
.nav__cta{
  border: 1px solid var(--c-gold-line);
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  transition: background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.nav__cta:hover{ background: var(--c-gold); color: var(--c-black); }
.nav__burger{
  display:none;
  background:none; border:none;
  width: 28px; height: 20px;
  position: relative;
}
.nav__burger span{
  position:absolute; left:0; right:0; height:1px; background: var(--c-white);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1){ top:0; }
.nav__burger span:nth-child(2){ top:9px; }
.nav__burger span:nth-child(3){ top:18px; }
.nav.menu-open .nav__burger span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav.menu-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.menu-open .nav__burger span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset:0;
  background: var(--c-black);
  z-index: 480;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:center;
  gap: 28px;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{
  font-family: var(--f-display);
  font-size: 34px;
  color: var(--c-white);
}
.mobile-menu .lang-switch{ margin-top: 20px; font-size:14px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height: 100svh;
  width: 100%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  position: relative;
  text-align:center;
  padding: 120px var(--gutter) 80px;
  background: var(--c-black);
  overflow:hidden;
}
.hero__glow{
  position:absolute;
  top:50%; left:50%;
  width: 900px; height: 900px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, #2a2114 0%, transparent 60%);
  opacity: 0;
  animation: glowPulse 7s ease-in-out .4s infinite;
  pointer-events:none;
}
.hero__content{
  position:relative;
  z-index: 2;
  display:flex;
  flex-direction: column;
  align-items:center;
  width: 100%;
  perspective: 1000px;
  transition: opacity .3s linear, transform .3s linear;
}
.hero__eyebrow{
  opacity:0;
  animation: fadeUp .9s var(--ease) .3s forwards;
}
.hero__logo-dock{
  width: min(78vw, 620px);
  will-change: transform, opacity, filter;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.hero__logo-wrap{
  position: relative;
  width: 100%;
  margin: 22px 0 10px;
  overflow: hidden;
  opacity:0;
  transform-origin: center center;
  transform: translateY(22px) scale(.96);
  animation: logoReveal 1.4s var(--ease) .5s forwards, logoFloat 6s ease-in-out 2s infinite;
  will-change: transform, opacity;
}
.hero__logo{
  width: 100%;
  aspect-ratio: 2.961 / 1;
  display:block;
  position:relative;
  z-index:1;
}
.hero__logo-wrap::after{
  content:'';
  position:absolute;
  inset: -10% -10%;
  background: linear-gradient(90deg, var(--c-black) 0%, var(--c-black) 42%, transparent 60%);
  transform: translateX(0);
  animation: logoWipe 1.6s var(--ease) 1.35s forwards;
  z-index: 2;
  pointer-events:none;
}
.hero__logo-wrap::before{
  content:'';
  position:absolute;
  inset: -10% -30%;
  background: linear-gradient(100deg, transparent 40%, #F4F1EA55 48%, var(--c-gold) 50%, #F4F1EA55 52%, transparent 60%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%);
  animation: logoShimmer 1.8s ease-out 2.05s 1;
  z-index: 3;
  pointer-events:none;
}
.hero__claim{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 0.02em;
  color: var(--c-white);
  opacity:0;
  animation: fadeUp .9s var(--ease) 2.15s forwards;
}
.hero__sub{
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white-dim);
  opacity:0;
  animation: fadeUp .9s var(--ease) 2.4s forwards;
}
.hero__scroll{
  position:absolute;
  bottom: 36px; left:50%;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0;
  z-index: 2;
  animation: fadeUp .9s var(--ease) 2.8s forwards;
}
.hero__scroll span{
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-white-dim);
}
.hero__scroll svg{
  width: 16px;
  height: 24px;
  color: var(--c-gold);
  animation: arrowBounce 1.6s ease-in-out infinite;
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes logoReveal{
  from{ opacity:0; transform: translateY(22px) scale(.96); filter: blur(10px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes logoWipe{
  from{ transform: translateX(0); opacity:1; }
  to{ transform: translateX(-100%); opacity:0; }
}
@keyframes logoShimmer{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(120%); }
}
@keyframes logoFloat{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-8px) scale(1); }
}
@keyframes glowPulse{
  0%, 100%{ opacity: .5; transform: translate(-50%,-50%) scale(1); }
  50%{ opacity: .9; transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes arrowBounce{
  0%, 100%{ transform: translateY(0); opacity:.6; }
  50%{ transform: translateY(8px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero__logo-wrap{ animation: none !important; opacity:1; transform:none; }
  .hero__logo-wrap::after, .hero__logo-wrap::before{ display:none; }
  .hero__glow{ animation:none; opacity:.6; }
  .hero__eyebrow, .hero__claim, .hero__sub, .hero__scroll{ opacity:1; animation:none; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  overflow:hidden;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-black-2);
  padding: 18px 0;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation: marqueeScroll 24s linear infinite;
  will-change: transform;
}
.marquee__track span{
  font-family: var(--f-display);
  font-size: clamp(15px,2vw,20px);
  letter-spacing: .1em;
  text-transform:uppercase;
  color: var(--c-gold);
  white-space:nowrap;
  padding-right: 20px;
}
@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* =========================================================
   GENERIC SECTION
   ========================================================= */
.section{
  padding: clamp(80px, 12vw, 160px) 0;
  position: relative;
}
.section--alt{ background: var(--c-black-2); }
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* THE EXPERIENCE / I NOSTRI SPAZI */
.experience__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:start;
  margin-top: 56px;
}
.spaces{
  display:flex;
  flex-direction: column;
}
.space{
  position:relative;
  display:flex;
  align-items:center;
  gap: 22px;
  padding: 24px 16px;
  border-top: 1px solid var(--c-line);
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.space:last-child{ border-bottom: 1px solid var(--c-line); }
.space.reveal{ transition-delay: calc(var(--i, 0) * 90ms); }
.space__bg{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, var(--c-gold-soft), transparent 75%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease);
  pointer-events:none;
}
.space.is-active .space__bg{ transform: scaleX(1); }
.space__num{
  position:relative; z-index:1;
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--c-white-dim);
  letter-spacing: .05em;
  min-width: 26px;
  transition: color .4s var(--ease);
}
.space.is-active .space__num{ color: var(--c-gold); }
.space__title{
  position:relative; z-index:1;
  font-family: var(--f-display);
  font-size: clamp(20px,2.6vw,28px);
  color: var(--c-white);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.space.is-active .space__title{ color: var(--c-gold); transform: translateX(6px); }
.space__desc{
  position:relative; z-index:1;
  margin-left:auto;
  font-size: 13px;
  color: var(--c-white-dim);
  max-width: 220px;
  text-align:right;
  font-weight:300;
  opacity:0;
  transform: translateX(-10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.space.is-active .space__desc{ opacity:1; transform:translateX(0); }

/* =========================================================
   DAY TO NIGHT — signature scroll sequence
   ========================================================= */
.daynight{
  position: relative;
  height: 100svh;
  background: var(--daynight-bg);
  transition: background 0.6s var(--ease);
  overflow: hidden;
}
.daynight__sticky{
  position: relative;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.daynight__flash{
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--daynight-accent);
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.daynight__flash.is-flashing{ animation: daynightFlash .5s ease-out; }
@keyframes daynightFlash{
  0%{ opacity: 0; }
  18%{ opacity: .45; }
  100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .daynight__flash.is-flashing{ animation: none; }
}
.daynight__head{
  position:absolute;
  top: 100px;
  left:0; right:0;
  text-align:center;
  z-index: 3;
}
.daynight__head .eyebrow{ color: var(--daynight-accent); }
.daynight__frames{
  position: relative;
  height: 100%;
  width: 100%;
}
.daynight__frame{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 0 var(--gutter);
  opacity: 0;
  transform: translateX(70px) scale(.94);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity, filter;
  transition: transform .7s cubic-bezier(.16,.84,.44,1), opacity .5s ease, filter .5s ease;
}
.daynight__frame.is-active{
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  z-index: 2;
}
.daynight__frame.is-leaving{
  opacity: 0;
  transform: translateX(-70px) scale(.94);
  filter: blur(6px);
  z-index: 1;
  transition: transform .5s cubic-bezier(.55,0,1,.45), opacity .4s ease, filter .4s ease;
}
.daynight__time-wrap{
  position: relative;
  display: inline-block;
}
.daynight__time{
  font-family: var(--f-display);
  font-size: clamp(64px, 14vw, 160px);
  line-height: 1;
  color: var(--daynight-accent);
  font-weight: 400;
  letter-spacing: -0.02em;
  transition: color .1s linear;
}
.daynight__time-bar{
  position: absolute;
  left: 50%;
  bottom: -14px;
  height: 2px;
  width: 0;
  background: var(--daynight-accent);
  transform: translateX(-50%);
  transition: width .6s var(--ease) .08s, background .1s linear;
}
.daynight__frame.is-active .daynight__time-bar{ width: 72px; }
.daynight__label{
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-white);
}
.daynight__desc{
  margin-top: 16px;
  font-size: 15px;
  color: var(--c-white-dim);
  max-width: 440px;
  font-weight: 300;
}
.daynight__progress{
  position:absolute;
  bottom: 52px;
  left:50%;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 14px;
  z-index: 3;
  width: min(78vw, 360px);
}
.daynight__track{
  position:relative;
  flex: 1;
  height: 1px;
  background: var(--c-line);
}
.daynight__track-fill{
  position:absolute;
  top:0; left:0;
  height:100%;
  width: 0%;
  background: var(--daynight-accent);
  transition: background .1s linear, width .45s cubic-bezier(.22,.85,.32,1);
}
.daynight__dots{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.daynight__dot{
  width: 5px; height:5px;
  border-radius:50%;
  background: var(--c-black);
  border: 1px solid var(--c-line);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.daynight__dot.is-active{
  background: var(--daynight-accent);
  border-color: var(--daynight-accent);
  transform: scale(1.6);
}
.daynight__next{
  position: absolute;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
  z-index: 5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--daynight-accent);
  background: transparent;
  color: var(--daynight-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  animation: daynightNextPulse 2.4s ease-in-out infinite;
  transition: background .25s var(--ease), color .1s linear, border-color .1s linear, transform .2s var(--ease);
}
.daynight__next:hover{ background: var(--daynight-accent); color: var(--c-black); }
.daynight__next:active{ transform: translateY(-50%) scale(.9); }
.daynight__next svg{
  width: 20px; height: 20px;
  transition: transform .3s var(--ease);
}
.daynight__next:hover svg{ transform: translateX(3px); }
@keyframes daynightNextPulse{
  0%, 100%{ box-shadow: 0 0 0 0 var(--c-gold-soft); }
  50%{ box-shadow: 0 0 0 12px transparent; }
}
@media (max-width: 560px){
  .daynight__next{ width: 50px; height: 50px; right: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .daynight__next{ animation:none; }
}

/* =========================================================
   EVENTI
   ========================================================= */
.events__list{
  display:flex;
  flex-direction: column;
  margin-top: 56px;
}
.event-card{
  display:flex;
  align-items:center;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid var(--c-line);
}
.event-card:last-child{ border-bottom: 1px solid var(--c-line); }
.event-card.reveal{ transition-delay: calc(var(--i, 0) * 90ms); }
.event-card__date{
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--c-gold);
  min-width: 96px;
  letter-spacing: .03em;
}
.event-card__body{
  display:flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.event-card__title{
  font-family: var(--f-display);
  font-size: clamp(18px,2.2vw,24px);
  color: var(--c-white);
}
.event-card__desc{
  font-size: 13px;
  color: var(--c-white-dim);
  font-weight: 300;
}
.event-card__time{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-white-dim);
  white-space: nowrap;
}
.events__empty{
  margin-top: 56px;
  padding: 48px 0;
  text-align:center;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.events__empty-dot{
  width: 8px; height:8px;
  border-radius:50%;
  background: var(--c-gold);
  margin: 0 auto 18px;
  animation: pulseDot 1.8s ease-in-out infinite;
}
.events__empty p{
  color: var(--c-white-dim);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .02em;
}
@keyframes pulseDot{
  0%, 100%{ opacity:.4; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce){
  .events__empty-dot{ animation: none; opacity:.8; }
}

/* =========================================================
   GALLERIA
   ========================================================= */
.gallery__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 56px;
}
.gallery__tile{
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
  background: var(--c-black-3);
}
.gallery__tile img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .6s var(--ease);
}
.gallery__tile:hover img{ transform: scale(1.06); }
.gallery__tile--placeholder{
  border: 1px dashed var(--c-line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery__tile--placeholder span{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-white-dim);
  opacity: .45;
}
.gallery__tile--placeholder.is-lead{ border-color: var(--c-gold-line); }
.gallery__tile--placeholder.is-lead span{ opacity:1; color: var(--c-gold); }
@media (max-width: 900px){
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); }
  .event-card{ flex-wrap:wrap; gap: 8px 24px; }
  .event-card__time{ order:3; }
}

/* =========================================================
   LA NOSTRA CUCINA / LOUNGE BAR — click-to-reveal copy
   ========================================================= */
.reveal-block{ max-width: 720px; }
.reveal-toggle{
  display:inline-flex;
  align-items:center;
  gap: 14px;
  margin-top: 30px;
  padding: 14px 26px;
  background: transparent;
  border: 1px solid var(--c-gold-line);
  color: var(--c-gold);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.reveal-toggle:hover{ background: var(--c-gold); color: var(--c-black); }
.reveal-toggle__icon{
  position: relative;
  width: 12px; height: 12px;
  flex-shrink: 0;
}
.reveal-toggle__icon::before, .reveal-toggle__icon::after{
  content:'';
  position:absolute;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.reveal-toggle__icon::before{ top:50%; left:0; width:100%; height:1px; margin-top:-0.5px; }
.reveal-toggle__icon::after{ left:50%; top:0; height:100%; width:1px; margin-left:-0.5px; }
.reveal-toggle[aria-expanded="true"] .reveal-toggle__icon::after{ transform: rotate(90deg); opacity:0; }

.reveal-body-wrap{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease);
}
.reveal-body-wrap.is-open{ grid-template-rows: 1fr; }
.reveal-body-inner{ overflow: hidden; }
.reveal-body-inner .section-body{ margin-top: 28px; max-width: 100%; }
.reveal-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 12px 28px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.reveal-tags span{
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white-dim);
}

.section-link-btn{
  display:inline-flex;
  align-items:center;
  gap: 14px;
  margin-top: 30px;
  padding: 14px 26px;
  background: transparent;
  border: 1px solid var(--c-gold-line);
  color: var(--c-gold);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.section-link-btn:hover{ background: var(--c-gold); color: var(--c-black); }
.section-link-btn svg{
  width: 16px; height: 9px;
  flex-shrink: 0;
  animation: linkBtnNudge 1.6s ease-in-out infinite;
}
@keyframes linkBtnNudge{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce){
  .section-link-btn svg{ animation: none; }
}

/* ABOUT */
.about__inner{
  max-width: 780px;
}
.about__statement{
  font-family: var(--f-body);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.6;
  color: var(--c-white);
  font-weight: 300;
  letter-spacing: 0.005em;
  margin: 30px 0 0;
}
.about__statement em{
  font-style: normal;
  color: var(--c-gold);
}
.about__cta{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  margin-top: 32px;
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
  border-bottom: 1px solid var(--c-gold-line);
  padding-bottom: 6px;
  transition: gap .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.about__cta svg{ width:16px; height:9px; flex-shrink:0; transition: transform .3s var(--ease); }
.about__cta:hover{ gap: 18px; border-color: var(--c-gold); color: var(--c-white); }
.about__cta:hover svg{ transform: translateX(3px); }

.about__words{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  gap: 14px 34px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
  text-align:center;
}
.about__words span{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-white-dim);
}

/* CONTACT */
.contact__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 56px;
}
.contact__list{ margin-top: 34px; }
.contact__row{
  display:flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--c-line);
}
.contact__row:last-child{ border-bottom: 1px solid var(--c-line); }
.contact__row-label{
  width: 120px;
  flex-shrink:0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding-top:2px;
}
.contact__row-value{
  font-size: 16px;
  color: var(--c-white);
  font-weight: 300;
  line-height:1.5;
}
.contact__row-value a:hover{ color: var(--c-gold); }

.map-box{
  position: relative;
  aspect-ratio: 4/5;
  background:
    radial-gradient(ellipse at 50% 30%, #1c1a15 0%, transparent 65%),
    var(--c-black-3);
  border: 1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 10px;
  padding: 40px;
}
.map-box__pin{
  width: 34px;
  height: 34px;
  color: var(--c-gold);
  margin-bottom: 8px;
}
.map-box__title{
  font-family: var(--f-display);
  font-size: 20px;
  color: var(--c-white);
  font-weight: 400;
}
.map-box__addr{
  color: var(--c-white-dim);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 10px;
}
.map-box__cta{
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-gold-line);
  padding: 12px 26px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.map-box__cta:hover{ background: var(--c-gold); color: var(--c-black); }

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: var(--c-gold);
  color: var(--c-black);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 32px;
  margin-top: 40px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  font-weight:600;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--c-gold-soft); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--c-black);
  border-top: 1px solid var(--c-line);
  padding: 72px 0 28px;
}
.footer__top{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
.footer__logo{ height: 22px; width:auto; aspect-ratio: 2.961/1; margin-bottom: 20px; opacity:.9; }
.footer__tag{
  font-size: 13px;
  color: var(--c-white-dim);
  font-weight:300;
  max-width: 240px;
  line-height:1.7;
}
.footer__col-title{
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 18px;
}
.footer__col a, .footer__col p{
  display:block;
  font-size: 14px;
  color: var(--c-white-dim);
  font-weight:300;
  line-height: 2;
}
.footer__col a:hover{ color: var(--c-white); }
.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
}
.footer__legal{
  font-size: 11px;
  color: #6b6b66;
  line-height: 1.8;
  max-width: 640px;
}
.footer__legal a{ color: #8a8a83; }
.footer__legal a:hover{ color: var(--c-gold); }
.footer__links{
  display:flex;
  gap: 24px;
}
.footer__links a{
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white-dim);
}
.footer__links a:hover{ color: var(--c-gold); }

/* =========================================================
   FLOATING WHATSAPP CTA
   ========================================================= */
.float-cta{
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 400;
  display:flex;
  align-items:center;
  gap: 10px;
  background: var(--c-gold);
  color: var(--c-black);
  padding: 15px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px -10px #000000cc;
  transition: transform .3s var(--ease);
}
.float-cta:hover{ transform: translateY(-3px); }
.float-cta svg{ width:16px; height:16px; }

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie-banner{
  position: fixed;
  left: 20px; right:20px; bottom: 20px;
  max-width: 560px;
  z-index: 900;
  background: var(--c-black-3);
  border: 1px solid var(--c-line);
  padding: 26px;
  transform: translateY(140%);
  transition: transform .6s var(--ease);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner h3{
  font-family: var(--f-display);
  font-size: 18px;
  margin: 0 0 10px;
  font-weight:400;
}
.cookie-banner p{
  font-size: 13px;
  color: var(--c-white-dim);
  line-height:1.7;
  font-weight:300;
  margin: 0 0 18px;
}
.cookie-banner p a{ color: var(--c-gold); text-decoration: underline; text-underline-offset:3px; }
.cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.cookie-banner__actions button{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--c-gold-line);
  background: transparent;
  color: var(--c-white);
}
.cookie-banner__actions button.primary{
  background: var(--c-gold);
  color: var(--c-black);
  border-color: var(--c-gold);
}
.cookie-banner__actions button:hover{ opacity:.85; }

.cookie-prefs{
  position: fixed; inset:0; z-index: 950;
  background: #000000cc;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease);
}
.cookie-prefs.is-open{ opacity:1; pointer-events:all; }
.cookie-prefs__box{
  background: var(--c-black-2);
  border: 1px solid var(--c-line);
  max-width: 560px;
  width:100%;
  max-height: 84vh;
  overflow:auto;
  padding: 36px;
}
.cookie-prefs__box h3{ font-family: var(--f-display); font-weight:400; font-size:24px; margin:0 0 20px;}
.cookie-cat{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding: 18px 0;
  border-top: 1px solid var(--c-line);
}
.cookie-cat:last-of-type{ border-bottom: 1px solid var(--c-line); margin-bottom: 24px;}
.cookie-cat__title{ font-size:14px; color:var(--c-white); margin:0 0 6px; font-weight:600; }
.cookie-cat__desc{ font-size:12px; color:var(--c-white-dim); font-weight:300; line-height:1.6; max-width: 360px;}
.switch{
  position:relative; width: 40px; height: 22px; flex-shrink:0;
}
.switch input{ opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; z-index:1;}
.switch__track{
  position:absolute; inset:0;
  background: #3a3a35;
  transition: background .25s;
}
.switch__thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px;
  background: var(--c-white);
  transition: transform .25s;
}
.switch input:checked ~ .switch__track{ background: var(--c-gold); }
.switch input:checked ~ .switch__thumb{ transform: translateX(18px); }
.switch input:disabled ~ .switch__track{ opacity:.5; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .experience__grid, .contact__grid{ grid-template-columns: 1fr; gap: 40px; }
  .footer__top{ grid-template-columns: 1fr 1fr; row-gap:40px; }
  .space__desc{ display:none; }
  .float-cta span{ display:none; }
  .float-cta{ padding: 14px; border-radius: 50%; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction: column; align-items:flex-start; }
  .daynight__time{ font-size: 72px; }
}

/* =========================================================
   PAGE TRANSITIONS — cinematic fade between pages
   ========================================================= */
.page-transition{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--c-black);
  opacity: 1;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.page-transition.is-hidden{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  .page-transition{ transition: none; }
}

/* Legal pages */
.legal-page{
  padding: 160px 0 100px;
  max-width: 820px;
  margin: 0 auto;
}
.legal-page h1{
  font-family: var(--f-display);
  font-size: clamp(30px,4vw,44px);
  font-weight:400;
  margin: 16px 0 40px;
}
.legal-page h2{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight:400;
  color: var(--c-gold);
  margin: 40px 0 14px;
}
.legal-page p, .legal-page li{
  color: var(--c-white-dim);
  font-weight:300;
  line-height:1.8;
  font-size:15px;
}
.legal-page ul{ padding-left: 20px; list-style: disc; }
.legal-page a{ color: var(--c-gold); text-decoration:underline; text-underline-offset:3px; }