/* ==========================================================================
   Timeless Beach Hotel — Base layer
   Typography foundation, motion primitives, cursor, grain, a11y fallbacks.
   Scoped under .tbh to avoid fighting wp-admin / editor.
   ========================================================================== */

/* ---- Typographic foundation (applied site-wide on front end) ---- */
body.tbh,
body.tbh .sc_layouts_row,
body.tbh p,
body.tbh li,
body.tbh .widget {
  font-family: var(--tbh-font-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.tbh {
  background: var(--tbh-ground);
  color: var(--tbh-ink);
  font-size: var(--tbh-fs-body);
  line-height: 1.7;
}

body.tbh h1, body.tbh h2, body.tbh h3, body.tbh h4, body.tbh h5, body.tbh h6,
.tbh-display {
  font-family: var(--tbh-font-display);
  font-weight: 300;
  letter-spacing: var(--tbh-track-display);
  line-height: 1.06;
  color: var(--tbh-ink);
}

/* selection: accent fill takes the ink label (5.23 AA); white would be 1.95 */
.tbh ::selection { background: var(--tbh-accent); color: var(--tbh-ink); }

/* ---- Reusable building blocks ---- */
.tbh-eyebrow {
  font-family: var(--tbh-font-display);
  font-weight: 500;
  font-size: var(--tbh-fs-eyebrow);
  letter-spacing: var(--tbh-track-eyebrow);
  text-indent: var(--tbh-track-eyebrow);
  text-transform: uppercase;
  /* deep cyan, not the raw accent: #0DCDDB as text on a light ground is
     1.68:1. --tbh-accent-deep holds 5.29 / 5.51 / 4.51 on the three grounds. */
  color: var(--tbh-accent-deep);
  display: inline-flex;
  align-items: center;
  gap: .9em;
}
/* on dark sections the deep cyan is too close to the ground — brighten it */
.tbh-on-dark .tbh-eyebrow,
#tbh-hero .tbh-eyebrow,
#tbh-cta .tbh-eyebrow,
[id^="tbh-phero"] .tbh-eyebrow,
.tbh-hero .tbh-eyebrow,
.tbh-cta .tbh-eyebrow { color: var(--tbh-accent-glow); }
.tbh-eyebrow::before {
  content: "";
  width: 2.4em; height: 1px;
  background: currentColor;
  opacity: .6;
}
.tbh-eyebrow.is-centered::before { display: none; }

.tbh-shell { width: min(100% - (var(--tbh-gutter) * 2), var(--tbh-maxw)); margin-inline: auto; }
.tbh-measure { max-width: var(--tbh-maxw-text); }

/* Horizon rule — recurring brand motif (logo's sunrise-over-dunes line) */
.tbh-horizon {
  position: relative; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--tbh-line-strong) 18%, var(--tbh-line-strong) 82%, transparent);
}
.tbh-horizon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--tbh-accent);
  box-shadow: 0 0 0 4px rgba(var(--tbh-accent-rgb),.18);
}

/* ---- Motion primitives ----
   Hooks work two ways so they're usable from theme markup AND Elementor:
     data attrs:  data-reveal="up|fade|scale|mask"
     css classes: .tbh-reveal (+ .is-fade | .is-scale | .is-mask)
   JS toggles .is-in (or applies a GSAP tween). */
[data-reveal], .tbh-reveal { will-change: transform, opacity; }

[data-reveal="up"], .tbh-reveal            { opacity: 0; transform: translateY(34px); }
[data-reveal="fade"], .tbh-reveal.is-fade  { opacity: 0; transform: none; }
[data-reveal="scale"], .tbh-reveal.is-scale{ opacity: 0; transform: scale(1.06); }

/* Masked image reveal (clip wipe) */
[data-reveal="mask"], .tbh-reveal.is-mask  { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
[data-reveal="mask"] > img, [data-reveal="mask"] > .tbh-media__img,
.tbh-reveal.is-mask > img, .tbh-reveal.is-mask img { transform: scale(1.18); }

/* Staggered groups (class form for Elementor) start hidden until JS releases */
.tbh-reveal-group:not(.is-in) .tbh-reveal-item { opacity: 0; transform: translateY(36px); }

/* Line-by-line / word masks handled via .tbh-line wrappers from SplitType */
.tbh-line-mask { overflow: hidden; display: block; }
.tbh-line-mask > .line,
.tbh-line-mask > .word { display: inline-block; will-change: transform; }

/* base transition for simple reveals (used when GSAP absent / reduced fallback) */
.tbh-anim [data-reveal] {
  transition: opacity var(--tbh-dur-slow) var(--tbh-ease-luxe),
              transform var(--tbh-dur-slow) var(--tbh-ease-luxe),
              clip-path var(--tbh-dur-slow) var(--tbh-ease-luxe);
}
[data-reveal].is-in,
.tbh-reveal.is-in,
.tbh-reveal-group.is-in .tbh-reveal-item {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
}
[data-reveal="mask"].is-in > img,
[data-reveal="mask"].is-in > .tbh-media__img,
.tbh-reveal.is-mask.is-in img { transform: scale(1); }

/* ---- Custom cursor ---- */
.tbh-cursor {
  position: fixed; top: 0; left: 0;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(var(--tbh-accent-rgb),.85);
  border-radius: 50%;
  pointer-events: none; z-index: var(--tbh-z-cursor);
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: transform .18s var(--tbh-ease-out),
              width .3s var(--tbh-ease-luxe), height .3s var(--tbh-ease-luxe),
              background-color .3s, border-color .3s, opacity .3s;
  display: grid; place-items: center; mix-blend-mode: normal;
}
.tbh-cursor__label {
  font-family: var(--tbh-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tbh-ink);
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s;
}
.tbh-cursor.is-hover  { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(var(--tbh-accent-rgb),.12); }
.tbh-cursor.is-view   { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--tbh-accent); border-color: var(--tbh-accent); }
.tbh-cursor.is-view .tbh-cursor__label { opacity: 1; transform: scale(1); }
.tbh-cursor.is-down   { transform: translate3d(var(--cx,-100px), var(--cy,-100px), 0) scale(.82); }
html:not(.tbh-fine) .tbh-cursor { display: none; }   /* only on fine pointers */

/* ---- Lightbox (tbh-app.js §8) ----
   Photo geometry is set inline by JS (fixed left/top/width/height = the fitted
   frame); every animation is transform / clip-path / opacity only. */
.tbh-lb {
  position: fixed; inset: 0; z-index: var(--tbh-z-lightbox);
  visibility: hidden; pointer-events: none;
  touch-action: none; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent;
}
.tbh-lb.is-open { visibility: visible; pointer-events: auto; }
.tbh-lb__backdrop {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(var(--tbh-depth-rgb),.30), transparent 70%),
    rgba(var(--tbh-scrim-rgb),.93);
  -webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%);
}
.tbh-lb__img {
  position: fixed; left: 0; top: 0; margin: 0; max-width: none; display: block;
  object-fit: cover; border-radius: 6px;
  clip-path: inset(0px 0px 0px 0px round 6px);
  transform-origin: 50% 50%; will-change: transform, clip-path, opacity;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  cursor: grab;
}
.tbh-lb__img:active { cursor: grabbing; }

.tbh-lb__ui > * { opacity: 0; transition: opacity .55s var(--tbh-ease-luxe), transform .55s var(--tbh-ease-luxe); }
.tbh-lb__close { transform: translateY(-10px); }
.tbh-lb__prev  { transform: translateX(-10px); }
.tbh-lb__next  { transform: translateX(10px); }
.tbh-lb__meta  { transform: translateY(10px); }
.tbh-lb.is-ui .tbh-lb__ui > * { opacity: 1; transform: none; }
.tbh-lb.is-ui .tbh-lb__meta { transition-delay: .08s; }

.tbh-lb__btn {
  position: fixed; z-index: 2; display: grid; place-items: center;
  width: 54px; height: 54px; padding: 0; border-radius: 50%;
  color: var(--tbh-on-dark); background: rgba(var(--tbh-scrim-rgb),.38);
  border: 1px solid rgba(var(--tbh-on-dark-rgb),.24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer;
  transition: opacity .55s var(--tbh-ease-luxe), transform .55s var(--tbh-ease-luxe),
              background-color .35s var(--tbh-ease-luxe), border-color .35s var(--tbh-ease-luxe), color .35s var(--tbh-ease-luxe);
}
.tbh-lb__btn svg { width: 20px; height: 20px; transition: transform .45s var(--tbh-ease-luxe); }
/* beats the site-wide `body.tbh button:focus-visible` (tbh-elements.css), whose
   2px radius squared the round buttons off — keep the circle, ring it */
body.tbh .tbh-lb__btn:focus-visible { border-radius: 50%; outline: 2px solid var(--tbh-accent-glow); outline-offset: 3px; box-shadow: none; }
.tbh-lb__close { top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.4vw, 30px)); right: clamp(14px, 2.4vw, 30px); }
.tbh-lb__nav { top: 50%; margin-top: -27px; }
.tbh-lb__prev { left: clamp(14px, 2.4vw, 34px); }
.tbh-lb__next { right: clamp(14px, 2.4vw, 34px); }
/* hover only where it exists — a tap on touch would leave the fill stuck on */
@media (hover: hover) {
  .tbh-lb__btn:hover { background: var(--tbh-accent); border-color: var(--tbh-accent); color: var(--tbh-dark); }
  .tbh-lb__close:hover svg { transform: rotate(90deg); }
  .tbh-lb__prev:hover svg { transform: translateX(-3px); }
  .tbh-lb__next:hover svg { transform: translateX(3px); }
}

.tbh-lb__meta {
  position: fixed; z-index: 2; pointer-events: none;
  left: clamp(18px, 3vw, 44px); right: clamp(18px, 3vw, 44px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 2.8vw, 32px));
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
}
.tbh-lb__cap {
  margin: 0; max-width: 62ch; color: rgba(var(--tbh-on-dark-rgb),.72);
  font-family: var(--tbh-font-body); font-size: .9rem; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbh-lb__count {
  margin: 0; flex: none; color: rgba(var(--tbh-on-dark-rgb),.55);
  font-family: var(--tbh-font-display); font-size: .78rem; letter-spacing: .24em;
}
.tbh-lb__count b { color: var(--tbh-on-dark); font-weight: 400; }

@media (max-width: 700px) {
  .tbh-lb__btn { width: 48px; height: 48px; }
  .tbh-lb__nav { top: auto; margin-top: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
  .tbh-lb__prev { left: 16px; } .tbh-lb__next { right: 16px; }
  .tbh-lb__meta {
    left: 76px; right: 76px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  }
  .tbh-lb__cap { max-width: 100%; font-size: .78rem; text-align: center; }
  .tbh-lb__count { font-size: .7rem; }
}

/* ---- Grain overlay (atmosphere) ---- */
.tbh-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Smooth-scroll (Lenis) plumbing ---- */
html.tbh-lenis, html.tbh-lenis body { height: auto; }
.tbh-lenis.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- Reduced motion: strip all motion, reveal everything ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], .tbh-reveal, .tbh-reveal-item { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="mask"] > img, .tbh-reveal.is-mask img { transform: none !important; }
  .tbh-cursor { display: none !important; }
  .tbh-grain { display: none; }
}