/* ============================================================================
   ORBIT REVIEWS — one wide ellipse of review cards, a hero card at the front.
   ----------------------------------------------------------------------------
   The ring is positioned entirely in JS with 2D transforms; this file styles
   the pieces and does no layout maths of its own. Nothing here animates a
   property that causes reflow.
   ============================================================================ */

.orb{
  --orb-cw:62px;
  position:relative; margin:24px 0 6px;
  opacity:0; transition:opacity .5s var(--ease);
}
.orb.is-ready{ opacity:1; }

.orb-stage{
  position:relative;
  touch-action:pan-y; cursor:grab; outline:none; user-select:none;
}
.orb-stage:active{ cursor:grabbing; }
.orb-stage:focus-visible{ outline:2px solid var(--volt); outline-offset:4px; border-radius:var(--radius-lg); }

/* The ring's own box. Everything that has to be clipped lives in here; the
   hero card deliberately does not, so it can sit outside the ring on a phone
   without being cut off by this overflow. */
.orb-ringbox{
  position:relative;
  height:clamp(420px, 58vh, 600px);
  overflow:hidden;
  border-radius:var(--radius-lg);
}

/* Ambient light under the ring. */
.orb-ringbox::before{
  content:''; position:absolute; left:50%; top:50%; width:86%; aspect-ratio:2.6;
  transform:translate(-50%,-50%); pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,27,60,.22), rgba(255,120,40,.08) 45%, transparent 72%);
  filter:blur(46px);
  animation:orbGlow 9s ease-in-out infinite alternate;
}
@keyframes orbGlow{ to{ opacity:.55; transform:translate(-50%,-50%) scale(1.1); } }

.orb-ring{ position:absolute; left:50%; top:46%; width:0; height:0; }
.orb-particles{ position:absolute; inset:0; z-index:400; pointer-events:none; }

/* ------------------------------------------------------------------ cards */
/* Ring cards are images only. At this size any text is unreadable, and text
   nobody can read is just noise competing with the hero card, which is where
   the review is actually read. */
.orb-card{
  position:absolute; top:0; left:0;
  width:var(--orb-cw); aspect-ratio:3/4.2;
  border-radius:7px; overflow:hidden; cursor:pointer;
  background:#16161a;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 20px rgba(0,0,0,.55);
  will-change:transform, opacity;
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.orb-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.orb-card.b1{ filter:blur(1px) saturate(.85); }
.orb-card.b2{ filter:blur(2.6px) saturate(.65); }
.orb-card.is-front{
  border-color:rgba(255,27,60,.6);
  box-shadow:0 14px 34px rgba(0,0,0,.65), 0 0 26px rgba(255,27,60,.35);
}
.orb-card__play{
  position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border-left:7px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.8));
}

/* ------------------------------------------------------------- hero card */
.orb-hero{
  position:absolute; left:50%; top:50%; z-index:300;
  transform:translate(-50%,-50%) translateY(12px) scale(.95);
  width:min(430px, 80%);
  opacity:0;
  display:flex; gap:15px; align-items:center;
  padding:14px; border-radius:18px; cursor:pointer; overflow:hidden;
  background:linear-gradient(150deg, rgba(34,31,37,.93), rgba(11,11,14,.9));
  border:1px solid rgba(255,27,60,.42);
  box-shadow:0 34px 74px rgba(0,0,0,.75), 0 0 62px rgba(255,27,60,.24);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:transform .55s var(--ease), opacity .45s var(--ease), box-shadow .3s var(--ease);
}
.orb-hero.is-in{ opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); }
.orb-hero:hover{ box-shadow:0 40px 86px rgba(0,0,0,.8), 0 0 84px rgba(255,27,60,.34); }
/* Reflection: a soft gradient, not a mirrored copy — same read, a fraction
   of the paint cost. */
.orb-hero::after{
  content:''; position:absolute; left:10%; right:10%; bottom:-15px; height:20px;
  border-radius:50%; pointer-events:none; filter:blur(9px);
  background:radial-gradient(ellipse at center, rgba(255,27,60,.34), transparent 70%);
}
.orb-hero__sweep{
  position:absolute; inset:-40% -60%; pointer-events:none; z-index:3;
  background:linear-gradient(74deg, transparent 40%, rgba(255,255,255,.26) 50%, transparent 60%);
  transform:translateX(-120%);
}
.orb-hero.is-in .orb-hero__sweep{ animation:orbSweep 1s var(--ease) .1s 1; }
@keyframes orbSweep{ to{ transform:translateX(120%); } }

.orb-hero__media{
  flex-shrink:0; width:112px; height:130px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(255,255,255,.12); background:#141418;
}
.orb-hero__info{ min-width:0; display:flex; flex-direction:column; gap:7px; }
.orb-hero__product{ font-size:12px; color:var(--red); text-transform:uppercase; letter-spacing:.06em; }
.orb-hero__quote{
  margin:0; font-size:13.5px; line-height:1.6; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.orb-hero__foot{ display:flex; align-items:center; gap:9px; }
.orb-hero__cta{
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red);
}

.orb-stars{ display:inline-flex; gap:1px; font-size:13px; color:#3a3a42; letter-spacing:1px; }
.orb-stars .on{ color:#ffc247; }
.orb-card__av{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--volt),var(--volt-dark)); color:#fff; font-size:12px; font-weight:800;
}
.orb-card__names{ min-width:0; display:flex; flex-direction:column; }
.orb-card__names b{ font-size:12.5px; color:var(--text); display:flex; align-items:center; gap:5px; }
.orb-card__names small{ font-size:10.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.orb-card__verified{
  flex-shrink:0; width:13px; height:13px; border-radius:50%; display:grid; place-items:center;
  background:#2ecc71; color:#053; font-size:8px; font-weight:900;
}

/* ---------------------------------------------------------------- stats */
.orb-hub{
  display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;
  margin-bottom:6px; text-align:center;
}
.orb-hub__cell{ display:flex; flex-direction:column; gap:2px; }
.orb-hub__cell b{
  font-family:'Oswald',sans-serif; font-size:clamp(24px,3.2vw,34px); line-height:1; color:#fff;
}
.orb-hub__cell b i{ font-style:normal; font-size:.45em; color:var(--text-faint); }
.orb-hub__cell span{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-faint); font-weight:700;
}
.orb-hub__stars{ color:#ffc247; font-size:13px; letter-spacing:2px; }

.orb-tip{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:410;
  padding:7px 15px; border-radius:var(--radius-pill);
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(10,10,13,.82); color:var(--text-muted);
  border:1px solid var(--border-strong); backdrop-filter:blur(8px);
  pointer-events:none; animation:orbTip 2.6s ease-in-out infinite;
}
.orb-tip.is-gone{ opacity:0; transition:opacity .45s; }
@keyframes orbTip{ 50%{ transform:translateX(-50%) translateY(-3px); opacity:.7; } }

/* -------------------------------------------------------------- lightbox */
.orb-lb{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:24px; }
.orb-lb.is-open{ display:flex; animation:orbLbIn .28s var(--ease); }
@keyframes orbLbIn{ from{ opacity:0; } }
.orb-lb__backdrop{ position:absolute; inset:0; background:rgba(4,4,6,.87); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); }
.orb-lb__stage{ position:relative; z-index:2; width:min(940px,100%); max-height:84vh; }
.orb-lb__card{
  display:grid; grid-template-columns:1.05fr .95fr;
  border-radius:var(--radius-lg); overflow:hidden; max-height:84vh;
  background:linear-gradient(150deg, rgba(28,26,31,.97), rgba(11,11,14,.97));
  border:1px solid var(--border-strong); box-shadow:0 50px 110px rgba(0,0,0,.82);
  transition:opacity .18s var(--ease); animation:orbLbZoom .36s var(--ease);
}
@keyframes orbLbZoom{ from{ transform:scale(.9) translateY(16px); opacity:0; } }
.orb-lb__media-wrap{ background:#0b0b0e; display:grid; place-items:center; overflow:hidden; }
.orb-lb__media{ width:100%; height:100%; max-height:84vh; object-fit:contain; display:block; transition:transform .35s var(--ease); cursor:zoom-in; }
.orb-lb__media.is-zoom{ transform:scale(1.7); cursor:zoom-out; }
.orb-lb__info{ padding:28px 30px; overflow-y:auto; display:flex; flex-direction:column; gap:13px; }
.orb-lb__product{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text); font-size:12.5px; font-weight:700;
}
.orb-lb__product img{ width:34px; height:34px; border-radius:8px; object-fit:cover; }
.orb-lb__product:hover{ border-color:rgba(255,27,60,.5); }
.orb-lb__info h3{ margin:0; font-size:17px; text-transform:uppercase; }
.orb-lb__text{ margin:0; font-size:14.5px; line-height:1.75; color:var(--text-muted); }
.orb-lb__chips{ display:flex; flex-wrap:wrap; gap:7px; }
.orb-chip{ padding:5px 11px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; background:rgba(255,255,255,.05); border:1px solid var(--border-strong); color:var(--text-muted); }
.orb-chip--ok{ background:rgba(46,204,113,.12); border-color:rgba(46,204,113,.4); color:#8ef0b4; }
.orb-lb__who{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
.orb-lb__who b{ font-size:13.5px; }

.orb-lb__close, .orb-lb__nav{
  position:absolute; z-index:4; display:grid; place-items:center; cursor:pointer;
  background:rgba(14,14,18,.82); border:1px solid var(--border-strong); color:#fff;
  border-radius:50%; backdrop-filter:blur(8px); transition:.22s var(--ease);
}
.orb-lb__close{ top:18px; right:20px; width:42px; height:42px; font-size:26px; line-height:1; }
.orb-lb__nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:28px; line-height:1; }
.orb-lb__nav--prev{ left:18px; } .orb-lb__nav--next{ right:18px; }
.orb-lb__close:hover, .orb-lb__nav:hover{ background:var(--red); border-color:var(--red); }

.orb-lb__rail{ position:absolute; left:0; right:0; bottom:14px; z-index:4; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:0 20px; }
.orb-lb__pos{ font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--text-faint); font-variant-numeric:tabular-nums; margin-right:6px; }
.orb-lb__dot{ width:36px; height:36px; border-radius:9px; overflow:hidden; cursor:pointer; padding:0; border:1.5px solid transparent; opacity:.45; transition:.22s var(--ease); background:none; }
.orb-lb__dot img{ width:100%; height:100%; object-fit:cover; display:block; }
.orb-lb__dot:hover{ opacity:.8; }
.orb-lb__dot.is-on{ opacity:1; border-color:var(--red); transform:translateY(-3px); }

/* --------------------------------------- crawler / no-JS review list copy */
.orb.is-ready ~ .review-list[data-orbit-fallback]{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1024px){
  .orb-ringbox{ height:clamp(380px, 50vh, 480px); }
  .orb-hero{ width:min(400px, 86%); }
  .orb-lb__card{ grid-template-columns:1fr; }
  .orb-lb__media-wrap, .orb-lb__media{ max-height:44vh; }
}

/* ---------------------------------------------------------------- mobile */
/* A readable card floating in the middle of a 375px-wide ring covers the
   ring completely — which is exactly what it did. On a phone the two are
   stacked instead: the ring keeps the top, the hero card sits underneath at
   full width. Both are fully visible, and the card gets more room for its
   text than it ever had floating. */
@media (max-width:620px){
  .orb{ --orb-cw:44px; }
  .orb-ringbox{ height:210px; border-radius:var(--radius-md); }
  .orb-ringbox::before{ width:110%; aspect-ratio:2.2; filter:blur(34px); }

  .orb-hero{
    position:relative; left:auto; top:auto; z-index:1;
    width:100%; margin-top:14px;
    transform:translateY(10px) scale(.98);
    padding:12px; gap:12px; border-radius:16px;
  }
  .orb-hero.is-in{ transform:translateY(0) scale(1); }
  /* The reflection belongs under a floating card; on a stacked one it just
     bleeds into the section below. */
  .orb-hero::after{ display:none; }
  .orb-hero__media{ width:84px; height:98px; border-radius:11px; }
  .orb-hero__quote{ font-size:13px; -webkit-line-clamp:3; }

  .orb-tip{ bottom:8px; font-size:9.5px; padding:5px 12px; }

  .orb-hub{ gap:0; display:grid; grid-template-columns:repeat(3,1fr); }
  .orb-hub__cell{ gap:1px; }
  .orb-hub__cell b{ font-size:20px; }
  .orb-hub__cell span{ font-size:8.5px; letter-spacing:.08em; }
  .orb-hub__stars{ font-size:10px; letter-spacing:1px; }

  .orb-lb{ padding:0; }
  .orb-lb__stage{ max-height:100vh; height:100%; }
  .orb-lb__card{ border-radius:0; max-height:100vh; height:100%; grid-template-rows:auto 1fr; }
  .orb-lb__info{ padding:18px 18px 72px; }
  .orb-lb__nav{ width:40px; height:40px; font-size:23px; }
  .orb-lb__dot{ width:30px; height:30px; }
}

/* Very narrow phones — the hero goes vertical so the quote is not squeezed
   into a 150px column next to the thumbnail. */
@media (max-width:380px){
  .orb-ringbox{ height:190px; }
  .orb-hero{ flex-direction:column; align-items:flex-start; }
  .orb-hero__media{ width:100%; height:150px; }
}

@media (prefers-reduced-motion:reduce){
  .orb-ringbox::before, .orb-tip{ animation:none; }
  .orb-hero, .orb-card{ transition:none; }
  .orb-hero.is-in .orb-hero__sweep{ animation:none; }
  .orb-lb.is-open, .orb-lb__card{ animation:none; }
}