/* ===== Brand system ===== */
:root{
  --ink:#0f0f0f;
  --paper:#0b0b0b;
  --rose:#e3a8bd;   /* Ophelia pink */
  --wine:#7a3b4c;   /* deep wine */
  --muted:#c2b6b9;

  /* Slideshow timing knobs */
  --fade: 1.6s;   /* dreamy dissolve duration */
  --zoom: 6s;    /* gentle zoom duration */
}
@font-face{
  font-family:"OpheliaJuana";
  src:url("./fonts/JuanaAlt-Medium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"OpheliaCrake";
  src:url("./fonts/Crake-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--paper); color:#eee; font-family: OpheliaJuana, ui-serif, Georgia, serif;}
a{color:#eee; text-decoration:none}
a:hover{opacity:.9}

/* ===== Header ===== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 999;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; padding: 14px 18px;
  background: linear-gradient(to bottom, rgba(11,11,11,.85), rgba(11,11,11,0));
  backdrop-filter: blur(2px);
}
.brand-left{
  font-family: OpheliaCrake, serif; font-size:18px; letter-spacing:.05em; opacity:.92;
}
.brand-logo{
  justify-self:center; display:block; height:auto;
  width:min(36vw, 560px); max-height:22vh;
  filter: invert(1) brightness(2) drop-shadow(0 4px 15px rgba(0,0,0,.4));
}
.links{
  justify-self:end; display:flex; gap:28px; font-size:18px;
  font-family: OpheliaCrake, serif; letter-spacing:.05em;
}

/* Mobile / tablet */
@media (max-width:900px){
  .nav{ padding:10px 14px; grid-template-columns:1fr; row-gap:6px;
        background:linear-gradient(to bottom, rgba(11,11,11,.85), rgba(11,11,11,.05)); }
  .brand-left{ display:none !important; }
  .brand-logo{ width:min(58vw, 360px); max-height:18vh; margin:0 auto; }
  .links{ justify-content:center; gap:18px; font-size:14px; }
}

/* anchor offset for fixed header */
:root { --header-offset: 120px; }
@media (max-width: 900px){ :root { --header-offset: 80px; } }
#visit, #contact, .about, .section { scroll-margin-top: var(--header-offset); }

/* ===== Hero ===== */
.hero{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:#000;

  /* make space so header doesn't cover faces */
  padding-top: 90px;

  /* ✅ stop the Safari bottom bar covering button */
  padding-bottom: env(safe-area-inset-bottom, 40px);
}
/* Raise CTA on mobile above Safari bar more */
@media (max-width:900px){
  .cta {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 60px) + 140px) !important;
    transform: translateX(-50%);
    left: 50%;
  }
}


@media (max-width:900px){
  .hero{ 
    padding-top: 70px;
    padding-bottom: calc(env(safe-area-inset-bottom, 40px) + 20px); /* mobile extra clearance */
  }
}

/* ===== Buttons (subtle shimmer) ===== */
.cta,
.btn,
.insta-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:999px; font-family: OpheliaCrake, serif; font-size:16px;
  background:linear-gradient(135deg, var(--rose), var(--wine)); color:#fff; box-shadow:0 12px 40px rgba(122,59,76,.35);
  overflow:hidden; isolation:isolate;
}
/* ✅ Center & lift CTA on mobile */
@media (max-width:900px){
  .hero{ position: relative; }

  .cta {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 60px) + 140px) !important;
  }
}
@media (max-width:900px){
  .hero{ position: relative; }

  .cta {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 60px) + 140px) !important;

    white-space: nowrap;      /* ✅ keep text on one line */
    width: auto;              /* ✅ shrink to fit content */
    padding-left: 28px;       /* optional — keep breathing room */
    padding-right: 28px;      /* optional — keep breathing room */
  }
}

.cta::before,
.btn::before,
.insta-btn::before{
  content:""; position:absolute; width:160%; height:160%; top:-35%; left:-35%;
  background:linear-gradient(120deg, transparent 47%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.12) 52%, transparent 56%);
  transform:translateX(-100%) rotate(8deg); animation:ophelia-shimmer 7s ease-in-out infinite;
  pointer-events:none; mix-blend-mode:screen; opacity:.45; filter:blur(2px);
}
@keyframes ophelia-shimmer{ to{ transform:translateX(200%) rotate(8deg); } }

/* ===== Content sections ===== */
main{max-width:1100px; margin:0 auto; padding:48px 18px 80px}
.about{padding:40px 0; color:#d9d9d9; font-size:20px}
.visit, .contact{margin-top:40px; background:#121213; border:1px solid #222; border-radius:16px; padding:24px}
h2{font-family: OpheliaCrake, serif; letter-spacing:.08em; color:#fff; margin:0 0 12px}
.hours{list-style:none; padding:0; margin:10px 0}
.hours li{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dotted #333}

/* ===== HERO SLIDESHOW — NO-CROP + DREAMY DISSOLVE ===== */

/* slow, soft crossfade */
.slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity var(--fade) ease-in-out;
  will-change: opacity;
}
.slide.is-current{ opacity:1; z-index:2; }
.slide.is-leaving{ opacity:0; z-index:1; }
/* === Soft Luxe Backdrop (no black bars) === */
.slide{ overflow:hidden; }   /* <-- only add overflow here; keep position:absolute above */

.slide::before{
  content:"";
  position:absolute; inset:-8%;
  z-index:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%),
    var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.05) brightness(.92);
  transform: scale(1.1);
  pointer-events:none;
}
/* micro-smooth fades on mobile + Safari */
.slides { transform: translateZ(0); }
.slide  { backface-visibility: hidden; will-change: opacity; }


/* No-crop default: show full image */


/* Ultra-wide viewports: fit by width but still no crop */


/* Optional per-image full-bleed (will crop) */

/* Gentle, very subtle zoom */


/* mobile tweaks */
/* --- KEN BURNS: soft zoom + gentle drift (only on .is-current) --- */
/* --- NO-CROP + FULL SWEEP PER SLIDE --- */
.slide img{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, -50%);
  max-width:100%; max-height:100%;
  width:auto; height:100%;
  object-fit: contain;              /* see the whole picture */
  object-position: center top;      /* start at top */
  animation: none;                  /* only animate when current */
  backface-visibility: hidden;
  will-change: object-position;
}

/* Animate only the visible slide */
.slide.is-current img{
  animation: panY var(--zoom) linear forwards;  /* top → bottom in exactly --zoom */
}

/* Full vertical sweep so you see everything */
@keyframes panY{
  from { object-position: center top; }
  to   { object-position: center bottom; }
}

/* Mobile: tiny headroom bias, same duration */
@media (max-width:900px){
  .slide img{ object-position: 50% 12%; }
}

  .slide.is-current img{
    animation-duration: calc(var(--zoom) + 2s);
  }
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .slide, .slide img{ transition:none !important; animation:none !important; }
}

/* ===== Overlay & vignette ===== */
.overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding: 18vh 6vw 10vh;
  pointer-events:none;
  z-index:4;
}
.overlay .cta{ pointer-events:auto; }
.vignette{
  pointer-events:none;
  position:absolute; inset:-12%;
  box-shadow: inset 0 0 320px rgba(0,0,0,.55);
  z-index:3;
}
.maps-btn{
  margin-top: 14px;
  background:linear-gradient(135deg, var(--rose), var(--wine));
  padding:12px 22px;
  border-radius:50px;
  font-family:OpheliaCrake, serif;
  font-size:16px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.maps-btn:hover{
  opacity:.85;
}
/* ======== PERFECT SLIDESHOW OVERRIDES (pan + fade) ======== */

/* Hero container + layers */
.hero { position: relative; height: 100vh; overflow: hidden; }
.slides { position: absolute; inset: 0; }

/* Crossfade */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;     /* ← classic 1.5s dissolve */
  background: #000;
}
/* Soft luxe backdrop (uses same image) */
.slide::before{
  content:"";
  position:absolute; inset:-8%;
  z-index:0;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,.28) 100%
    ),
    var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.05) brightness(.92);
  transform: scale(1.1);
  pointer-events: none;
}

.slide.is-current { opacity: 1; z-index: 2; }
.slide.is-leaving { opacity: 0; z-index: 1; }

/* Image movement — cover + vertical sweep */
/* === Soft Luxe Backdrop Behind Image (no black bars) === */
/* 🔸 Do NOT change position here */
.slide{
  overflow: hidden;   /* <-- only add this */
}

.slide::before{
  content:"";
  position:absolute; inset:-8%;
  z-index:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%),
    var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.05) brightness(.92);
  transform: scale(1.1);
  pointer-events: none;
}


.slide img {
  width: 100%;
  height: 120%;                       /* allows vertical movement */
  object-fit: cover;
  object-position: center top;        /* start at the face */
  animation: pan 12s ease-in-out infinite alternate;  /* ← classic timing */
  position: relative;
  z-index: 1;
}

/* Top→Bottom pan (alternate) */
@keyframes pan {
  0%   { object-position: center top; }
  100% { object-position: center bottom; }
}

/* Film grain + brand haze (kept as in your current build) */
.hero::after {
  content: "";
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode: soft-light;
  opacity: 0.18;
  background-image: url("https://raw.githubusercontent.com/thiago-da-silva/noise-texture/main/noise.png");
  background-size: 300px;
  z-index: 3;
}
.hero::before {
  content: "";
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(83, 0, 40, 0.3) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.75) 100%
  );
  z-index: 2;
}

/* Keep CTA overlay above everything */
.overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 8vw 6vw; pointer-events: none; z-index: 4; }
.overlay .cta { pointer-events: auto; }
.vignette { pointer-events: none; position: absolute; inset: -12%; box-shadow: inset 0 0 320px rgba(0,0,0,.55); z-index: 3; }
/* ===== RANDOM PAN DIRECTIONS (override) ===== */

/* Base: no motion until a direction class is present */
.slide img{
  width: 100%;
  height: 120%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  animation: none;
}

/* Direction variants (assigned by JS) */
.slide.dir-top    img{ object-position: center   top;    animation: panY    12s ease-in-out infinite alternate; }
.slide.dir-bottom img{ object-position: center   bottom; animation: panYrev 12s ease-in-out infinite alternate; }
.slide.dir-left   img{ object-position: left     center; animation: panX    12s ease-in-out infinite alternate; }
.slide.dir-right  img{ object-position: right    center; animation: panXrev 12s ease-in-out infinite alternate; }

/* Keyframes */
@keyframes panY    { 0%{object-position:center   top}    100%{object-position:center   bottom} }
@keyframes panYrev { 0%{object-position:center   bottom} 100%{object-position:center   top}    }
@keyframes panX    { 0%{object-position:left     center} 100%{object-position:right    center} }
@keyframes panXrev { 0%{object-position:right    center} 100%{object-position:left     center} }

/* Keep your fade exactly as-is */
.slide{ opacity:0; transition:opacity 1.5s ease; }
.slide.is-current{ opacity:1; z-index:2; }
.slide.is-leaving{ opacity:0; z-index:1; }

/* (Optional) slightly calmer motion on mobile */
@media (max-width:900px){
  .slide.dir-top img,
  .slide.dir-bottom img,
  .slide.dir-left img,
  .slide.dir-right img{
    height:110%;
    animation-duration:14s;
  }
}