/*
  Ritual Bar V4 Mockup — shared custom styles
  ────────────────────────────────────────────────────────────────────────
  Beyond Tailwind: ambient drift, paper-grain, motion specifics, and the
  Shopify-checkout-aesthetic primitives that Tailwind utilities don't cover.

  All HØLY tokens are defined in the Tailwind config (each page's inline
  `tailwind.config = { ... }` block). This file is for things that need
  custom CSS — animations, ambient layers, scrollbar tweaks.
*/

/* ─── Ambient sand drift + paper grain (Ritual Bar surface signature) ─── */

.rb-drift {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-color: #E4D9CA;
}

.rb-drift::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://cdn.shopify.com/s/files/1/0978/9148/3960/files/paper-grain.png?v=1779043917');
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: 0.42;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.rb-drift-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.rb-drift-1 {
  top: -50%; left: -25%;
  width: 150%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(138, 123, 104, 0.16) 0%, transparent 70%);
  animation: rb-drift-1 45s ease-in-out infinite;
}

.rb-drift-2 {
  top: -30%; right: -20%;
  width: 140%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(196, 168, 144, 0.14) 0%, transparent 70%);
  animation: rb-drift-2 55s ease-in-out infinite;
}

.rb-drift-3 {
  bottom: -40%; left: 10%;
  width: 130%; height: 160%;
  background: radial-gradient(ellipse at center, rgba(170, 181, 178, 0.10) 0%, transparent 70%);
  animation: rb-drift-3 65s ease-in-out infinite;
}

@keyframes rb-drift-1 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  33% { transform: translate(3%, 2%) scale(1.04); }
  66% { transform: translate(-2%, 4%) scale(0.97); }
}
@keyframes rb-drift-2 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  33% { transform: translate(-3%, 2%) scale(1.05); }
  66% { transform: translate(2%, -3%) scale(0.98); }
}
@keyframes rb-drift-3 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  33% { transform: translate(2%, -2%) scale(1.03); }
  66% { transform: translate(-2%, 3%) scale(0.99); }
}

@media (max-width: 767px) {
  .rb-drift-1 { animation-duration: 120s; }
  .rb-drift-2 { animation-duration: 130s; }
  .rb-drift-3 { animation-duration: 140s; }
}

/* ─── App-feel: hide native scrollbar on the booking surface for cleanliness ─── */

.app-scroll::-webkit-scrollbar { display: none; }
.app-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* ─── State transitions ─── */

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.state-enter { animation: fade-slide-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ─── Subtle pulse for "More" affordance ─── */

@keyframes pulse-soft {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

.pulse-soft { animation: pulse-soft 3.5s ease-in-out infinite; }

/* Pulse stops once the user has opened the details — no need to draw the eye anymore */
details[open] .pulse-soft { animation: none; opacity: 1; }

/* ─── Aura text — sunlight halo around the phrase, always pulsing ───
   Burnished Ochre (#C9A36D) layered with Veil Clay outer. Three text-shadow
   stacks so the warmth surrounds each glyph. Always on — no hover trigger.
*/

@keyframes aura-text-pulse {
  0%, 100% {
    text-shadow:
      0 0 14px rgba(201, 163, 109, 0.42),
      0 0 26px rgba(201, 163, 109, 0.22),
      0 0 38px rgba(217, 196, 187, 0.14);
  }
  50% {
    text-shadow:
      0 0 22px rgba(201, 163, 109, 0.68),
      0 0 36px rgba(201, 163, 109, 0.40),
      0 0 54px rgba(217, 196, 187, 0.24);
  }
}

.aura-text {
  animation: aura-text-pulse 3000ms ease-in-out infinite;
  transition: transform 160ms ease-out;
}

.aura-text:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .aura-text { animation: none; }
}

/* ─── Stage panes — relative anchor for the state-glow ─── */

.state-pane { position: relative; }

/* ─── Per-stage soothing transition cue — warm ochre wash that swells and fades ───
   Replaces the old "Almost there / Final step" hint phrases. Plays on every
   stage entrance (when .state-enter is re-applied).
*/

.state-glow {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 130%;
  max-width: 640px;
  height: 240px;
  background: radial-gradient(ellipse at center top, rgba(201, 163, 109, 0.18), transparent 70%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transform: translateX(-50%);
}

.state-pane.state-enter .state-glow {
  animation: state-glow-pulse 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes state-glow-pulse {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.92); }
  40%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(1.08); }
}

/* ─── Shared tile button vocabulary — calendar cells + time slots ───
   Mid-point between near-white calendar tile and dark time slot.
   Warm cream surface, soft line, ochre selected state. App-feel.
*/

.rb-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(244, 236, 224, 0.50);
  border: 1px solid rgba(123, 107, 88, 0.22);
  border-radius: 10px;
  color: #2D2820;
  font-family: 'EB Garamond', Garamond, serif;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.rb-tile:hover {
  background: rgba(244, 236, 224, 0.85);
  border-color: rgba(201, 163, 109, 0.50);
}

.rb-tile.is-selected {
  background: rgba(201, 163, 109, 0.16);
  border-color: #C9A36D;
}

.rb-tile-disabled {
  background: transparent;
  border: 1px solid rgba(123, 107, 88, 0.10);
  color: rgba(123, 107, 88, 0.32);
  cursor: not-allowed;
}
.rb-tile-disabled:hover {
  background: transparent;
  border-color: rgba(123, 107, 88, 0.10);
}

/* Calendar variant — compact single-number cell */
.rb-tile-cal {
  min-height: 48px;
  padding: 4px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  gap: 0;
}

/* Time variant — stacked primary (Morning/Afternoon) + sub (11 am / 1 pm) */
.rb-tile-time {
  min-height: 88px;
  padding: 14px 12px;
}
.rb-tile-time .rb-tile-primary {
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 22px;
  letter-spacing: 0.005em;
  line-height: 1;
}
.rb-tile-time .rb-tile-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(123, 107, 88, 0.78);
  margin-top: 6px;
}
.rb-tile-time.is-selected .rb-tile-sub { color: rgba(45, 40, 32, 0.85); }

/* ─── Elevation cards — hero (Dry Brushing) + equal-height others ─── */

.rb-elev {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(123, 107, 88, 0.16);
  border-radius: 12px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
  align-items: center;
  margin-bottom: 10px;
}
.rb-elev:hover {
  background: rgba(244, 236, 224, 0.55);
  border-color: rgba(201, 163, 109, 0.38);
}
.rb-elev.is-selected {
  background: rgba(201, 163, 109, 0.12);
  border-color: rgba(201, 163, 109, 0.55);
}
.rb-elev:not(.rb-elev-hero) { min-height: 100px; }

.rb-elev-hero {
  padding: 22px 20px;
  background: rgba(244, 236, 224, 0.55);
  border-color: rgba(201, 163, 109, 0.40);
  margin-bottom: 22px;
  align-items: flex-start;
}
.rb-elev-hero.is-selected {
  background: rgba(201, 163, 109, 0.18);
  border-color: rgba(201, 163, 109, 0.65);
}
.rb-elev-hero .rb-elev-check { align-items: flex-start; padding-top: 4px; }

.rb-elev-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-elev-body { min-width: 0; }

.rb-elev-label {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 16px;
  color: #1A1A1A;
  font-weight: 400;
}
.rb-elev-hero .rb-elev-label {
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 22px;
  letter-spacing: 0.005em;
}
.rb-elev-helper {
  font-size: 13px;
  color: rgba(26, 26, 26, 0.72);
  margin-top: 6px;
  line-height: 1.5;
}
.rb-elev-hero .rb-elev-helper {
  font-size: 14px;
  margin-top: 8px;
}

.rb-elev-price-wrap { text-align: right; align-self: center; }
.rb-elev-hero .rb-elev-price-wrap { align-self: flex-start; padding-top: 2px; }
.rb-elev-price {
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 16px;
  white-space: nowrap;
}
.rb-elev-price-sub {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  color: #8C8981;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.rb-elev-price-included {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-style: italic;
  color: #8C8981;
  white-space: nowrap;
}

/* ─── Form input — Shopify-checkout style ─── */
/* Larger touch targets, generous padding, subtle border + focus ring */

.form-input {
  width: 100%;
  padding: 14px 16px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #1A1A1A;
  background: #F4ECE0;
  border: 1px solid rgba(123, 107, 88, 0.28);
  border-radius: 6px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.form-input:hover { border-color: rgba(123, 107, 88, 0.55); }
.form-input:focus {
  outline: none;
  border-color: #2D2820;
  box-shadow: 0 0 0 3px rgba(45, 40, 32, 0.12);
}

/* ─── Primary button — Shopify-checkout style ─── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 24px;
  background: #2D2820;
  color: #F4ECE0;
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 1px solid #2D2820;
  border-radius: 6px;
  cursor: pointer;
  transition: background 180ms ease, transform 120ms ease;
  white-space: nowrap;
}

.btn-primary:hover { background: #1A1A1A; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

/* ─── Secondary / ghost button ─── */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  color: #7B6B58;
  font-family: 'Figtree', -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(123, 107, 88, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.btn-ghost:hover {
  color: #2D2820;
  border-color: #2D2820;
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
  .rb-drift-layer { animation: none; }
  .state-enter { animation: none; }
  .pulse-soft { animation: none; opacity: 1; }
  * { transition: none !important; }
}