/* ============================================================
   Obsidian Wing — front-page shell (bars, stage, panel swap)
   Font and colour tokens come from base.css.
   ============================================================ */

/* ---------- 1. SHELL METRICS ---------- */

:root {
  --ow-shell-pad:   clamp(16px, 3vw, 40px);
  --ow-bar-h:       80px;
  --ow-swap:        600ms;
  --ow-shift:       8%;        /* horizontal travel during a swap */
  --ow-preview-gap: 0px;       /* set by JS when the WPVibe preview bar is present */
}

@media (max-width: 767px) {
  :root { --ow-bar-h: 64px; --ow-shift: 14%; }
}

/* ---------- 2. DOCUMENT ---------- */

html, body { height: 100%; }

body.ow-shell-active {
  overflow: hidden;              /* the shell owns the viewport */
  overscroll-behavior: none;
}

/* neutral button base for the shell's own controls only —
   Elementor content inside the panels keeps its own buttons */
:where(.ow-bar, .ow-dots, .ow-reveal, .ow-work__picker) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- 3. SHELL ---------- */

.ow-shell {
  position: fixed;
  inset: 0;
  bottom: var(--ow-preview-gap);
  display: grid;
  grid-template-rows: var(--ow-bar-h) 1fr var(--ow-bar-h);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* logged-in admin bar must not cover the top bar */
body.admin-bar .ow-shell { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ow-shell { top: 46px; }
}

/* ---------- 4. BARS (fixed across every panel) ---------- */

.ow-bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);   /* equal sides, so the logo stays centred */
  align-items: center;
  gap: 16px;
  padding-inline: var(--ow-shell-pad);
  direction: ltr;               /* lock left/centre/right to match the Figma mock */
}

.ow-bar > * { direction: rtl; }

/* the gold rule: under the top bar, over the bottom bar */
.ow-bar--top    { border-bottom: 1px solid var(--ow-gold-deep); }
.ow-bar--bottom { border-top:    1px solid var(--ow-gold-deep); grid-template-columns: 1fr 1fr; }

.ow-bar__slot--left  { justify-self: start; }
.ow-bar__slot--right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }   /* column 3 even without a centre logo (removed in 1.5.1) */


/* --- pill buttons --- */

.ow-bar .ow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--ow-border);
  border-radius: 999px;
  background: rgba(18, 22, 27, .6);   /* Obsidian 800 @ 60% */
  color: var(--ow-text-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .25s, color .25s, background .25s;
}

.ow-bar .ow-pill:hover {
  border-color: var(--ow-gold-deep);
  color: var(--ow-text);
}

.ow-bar .ow-pill--sm   { padding: 0 16px; font-size: 13px; letter-spacing: .04em; }
.ow-bar .ow-pill--icon { width: 44px; padding: 0; }

/* language: a round button the size of the sound one (.ow-pill--icon), showing
   only the language you can switch to — EN on Persian, FA on English (Mohi, 1405/07/21).
   Which span shows is set in base.css, for every page. */
.ow-bar .ow-lang { color: var(--ow-text); font-size: 13px; font-weight: 600; letter-spacing: .04em; }

/* sound icon states */
#ow-sound .ow-sound__on            { display: none; }
#ow-sound[aria-pressed="true"] .ow-sound__on  { display: inline; }
#ow-sound[aria-pressed="true"] .ow-sound__off { display: none; }

.ow-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ow-success);
  box-shadow: 0 0 0 0 rgba(91, 143, 122, .5);
  animation: owPulse 2s ease-in-out infinite;
}

@keyframes owPulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 143, 122, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(91, 143, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 143, 122, 0); }
}

/* --- bottom bar content --- */

.ow-sig {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.5;
}
.ow-sig__name { color: var(--ow-text); font-size: 17px; font-weight: 600; }
.ow-sig__role { color: var(--ow-text-muted); font-size: 13px; }

.ow-tools {
  justify-self: start;
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--ow-text-dim);
  letter-spacing: .02em;
  direction: ltr;
}

/* --- entrance: one beat at a time (Mohi, 1405/07/21) ---
   Goal: each piece holds attention on its own for at least ~0.5s, then the next starts.
   Each move lasts .9s, but with --ow-ease-enter the visible travel is roughly its
   first .15–.55s, so beats .55s apart never move at the same time.
   beat 1  0.20  status        ← left
   beat 2  0.75  FA-EN, sound  ← right (one gesture, .12s apart)
   beat 3  1.30  name + role   ↑
   beat 4  1.85  Vibe Coding · Wordpress · Figma ↑ (a cascade, .2s apart)
   then the hero mark from 2.85s (ow-panels.css).
   (The header logo had its own beat until it was removed in 1.5.1; everything after moved up .55s.)
   "backwards" fill: hidden until its turn, then no leftover transform. */
.ow-bar .ow-status       { animation: owBarFromLeft  .9s var(--ow-ease-enter) .2s  backwards; }
.ow-bar .ow-lang         { animation: owBarFromRight .9s var(--ow-ease-enter) .75s backwards; }
.ow-bar #ow-sound        { animation: owBarFromRight .9s var(--ow-ease-enter) .87s backwards; }
.ow-sig                  { animation: owBarFromBelow .9s var(--ow-ease-enter) 1.3s backwards; }
.ow-tools span:nth-child(3) { animation: owBarFromBelow .9s var(--ow-ease-enter) 1.85s backwards; }  /* Vibe Coding */
.ow-tools span:nth-child(2) { animation: owBarFromBelow .9s var(--ow-ease-enter) 2.05s backwards; }  /* Wordpress */
.ow-tools span:nth-child(1) { animation: owBarFromBelow .9s var(--ow-ease-enter) 2.25s backwards; }  /* Figma */
.ow-tools span { display: inline-block; }   /* transforms need a box */

@keyframes owBarFromLeft  { from { opacity: 0; transform: translateX(-64px); } }
@keyframes owBarFromRight { from { opacity: 0; transform: translateX(64px); } }
@keyframes owBarFromBelow { from { opacity: 0; transform: translateY(40px); } }

@media (max-width: 767px) {
  .ow-status span:last-child { display: none; }  /* dot only on phones */
  .ow-bar .ow-status { width: 44px; padding: 0; }
  .ow-bar__slot--right { gap: 6px; }
  .ow-bar .ow-pill--sm { padding: 0 10px; }
  .ow-tools  { gap: 8px; font-size: 11px; white-space: nowrap; }   /* "Vibe Coding" must not wrap */
  .ow-sig__name { font-size: 14px; }
  .ow-sig__role { font-size: 11px; }
}

/* --- English (html.ow-en): bar text reads left to right; panels travel the other way --- */
html.ow-en .ow-bar > * { direction: ltr; }
html.ow-en .ow-bar > .ow-bar__slot--right { direction: rtl; }   /* sound and FA-EN keep the Figma order in both languages */
html.ow-en .ow-sig     { align-items: flex-end; }
html.ow-en             { --ow-shift: -8%; }      /* LTR: the next panel arrives from the right */
@media (max-width: 767px) {
  html.ow-en           { --ow-shift: -14%; }
}

/* ---------- 5. PANEL STAGE ---------- */

.ow-stage {
  position: relative;
  overflow: hidden;
  margin-inline: var(--ow-shell-pad);
  margin-block: 12px;
  border-radius: 14px;
  background: var(--ow-box);
}

/* every panel sits waiting off to the side; the active one is centred.
   RTL reading: the next panel arrives from the LEFT, the old one leaves RIGHT. */
.ow-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--ow-shift) * -1));
  transition:
    opacity    var(--ow-swap) var(--ow-ease),
    transform  var(--ow-swap) var(--ow-ease),
    visibility 0s linear var(--ow-swap);
}

.ow-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

/* direction of travel is set on the shell by JS */
.ow-shell[data-dir="back"] .ow-panel:not(.is-active):not(.is-leaving) {
  transform: translateX(var(--ow-shift));
}

.ow-panel.is-leaving {
  visibility: visible;
  opacity: 0;
}
.ow-shell[data-dir="fwd"]  .ow-panel.is-leaving { transform: translateX(var(--ow-shift)); }
.ow-shell[data-dir="back"] .ow-panel.is-leaving { transform: translateX(calc(var(--ow-shift) * -1)); }

/* the panel being prepared is placed without animating */
.ow-panel.is-staging { transition: none !important; }

/* hero panel has no inner padding — the canvas fills it */
.ow-panel--hero { padding: 0; overflow: hidden; }

/* quiet scrollbars inside panels */
.ow-panel { scrollbar-width: thin; scrollbar-color: var(--ow-border) transparent; }
.ow-panel::-webkit-scrollbar { width: 8px; }
.ow-panel::-webkit-scrollbar-track { background: transparent; }
.ow-panel::-webkit-scrollbar-thumb { background: var(--ow-border); border-radius: 999px; }
.ow-panel::-webkit-scrollbar-thumb:hover { background: var(--ow-surface); }

/* ---------- 6. PROGRESS DOTS ---------- */

.ow-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
  /* no direction lock: the dots follow the reading direction like the panels do.
     Persian: the first dot sits on the right and progress runs right → left;
     English: the reverse. A forced LTR row made visitors swipe the wrong way (1.7.2). */
}

.ow-dots button {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--ow-border);
  transition: background .3s, width .3s;
}

.ow-dots button[aria-current="true"] {
  width: 38px;
  background: var(--ow-gold-deep);
}

/* ============================================================
   FIRST VISIT TIP (1.8.1, small since 1.8.2): how to move between the panels.
   Comes after the hero entrance, beside the ring on wide screens and under it
   elsewhere. Phones read «swipe», a mouse reads «scroll».
   ============================================================ */

.ow-intro {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(44px, 8vh, 72px);          /* under the ring, above the dots */
  translate: -50% 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding-block: 10px;
  padding-inline: 14px 8px;
  background: rgba(18, 22, 27, .88);       /* Obsidian 800 */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(169, 129, 57, .4);    /* Warm Gold 600 */
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(10, 13, 16, .5);
  opacity: 0;
  transition: opacity .45s var(--ow-ease-enter), translate .45s var(--ow-ease-enter);
}
.ow-intro[hidden] { display: none; }
.ow-intro.is-open { opacity: 1; translate: -50% 0; }

/* wide screens: beside the ring, on the side the next page comes from */
@media (min-width: 1100px) {
  .ow-intro {
    left: auto;
    bottom: auto;
    top: 50%;
    inset-inline-end: clamp(24px, 5vw, 80px);
    translate: 0 calc(-50% + 10px);
    max-width: 240px;
  }
  .ow-intro.is-open { translate: 0 -50%; }
}

.ow-intro__icon { flex: none; display: block; color: var(--ow-gold); }
.ow-intro__text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ow-text); }
.ow-intro__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ow-text-muted);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.ow-intro__close:hover,
.ow-intro__close:focus-visible { color: var(--ow-gold); background: rgba(169, 129, 57, .1); }

/* which device: touch by default, a mouse swaps the icon and the text */
.ow-intro__icon--mouse,
.ow-intro__text--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ow-intro__icon--touch,
  .ow-intro__text--touch { display: none; }
  .ow-intro__icon--mouse,
  .ow-intro__text--mouse { display: block; }
}

/* the finger slides across the phone, the wheel rolls down */
.ow-intro__finger { animation: owIntroSwipe 2s ease-in-out infinite; }
.ow-intro__wheel  { animation: owIntroWheel 1.6s ease-in-out infinite; }
@keyframes owIntroSwipe { 0%, 100% { translate: -9px 0; } 50% { translate: 9px 0; } }
@keyframes owIntroWheel { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 8px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ow-intro { transition: none; }
  .ow-intro__finger, .ow-intro__wheel { animation: none; }
}