/* ============================================================
   Rocky's Ride — Magazine Viewer styles
   Pairs with /assets/js/magazine-viewer.js
   Uses brand tokens from /assets/css/style.css (--char, --offwhite,
   --jacket, --line, --mute). Safe fallbacks included so the viewer
   stands alone in demos.
   ============================================================ */
.mv-host{
  /* local fallbacks if style.css isn't loaded */
  --mv-char:        var(--char,        #1a1c18);
  --mv-offwhite:    var(--offwhite,    #f3f1ea);
  --mv-bone:        var(--bone,        #e8e4d8);
  --mv-jacket:      var(--jacket,      #2f4a73);
  --mv-line:        var(--line,        #ddd8c9);
  --mv-mute:        var(--mute,        #6b675d);
  --mv-display:     var(--display,     'Playfair Display', Georgia, serif);
  --mv-label:       var(--label,       'Barlow Condensed', sans-serif);
  --mv-serif:       var(--serif,       'Source Serif 4', Georgia, serif);
  display:block;
  width:100%;
}

.mv-root{
  background:var(--mv-char);
  color:var(--mv-offwhite);
  border:1px solid var(--mv-line);
  display:flex;
  flex-direction:column;
  min-height:480px;
  height:80vh;
  max-height:none;
  position:relative;
  font-family:var(--mv-serif);
  outline:none;
}
.mv-root:focus-visible{
  box-shadow:0 0 0 2px var(--mv-jacket) inset;
}

/* ---------- top bar ---------- */
.mv-topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--mv-char);
  flex:0 0 auto;
}
.mv-title{
  font-family:var(--mv-display);
  font-weight:700;font-size:18px;letter-spacing:.01em;
  color:var(--mv-offwhite);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mv-counter{
  font-family:var(--mv-label);
  text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;font-weight:600;
  color:var(--mv-bone);
  flex:0 0 auto;
}

/* ---------- stage ---------- */
.mv-stage{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.04) 0%, transparent 65%),
    var(--mv-char);
  padding:14px 8px;
  overflow:hidden;
}
.mv-page-wrap{
  position:relative;
  background:var(--mv-offwhite);
  box-shadow:
    0 12px 30px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.35);
  max-width:calc(100% - 96px);
  max-height:100%;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .22s ease;
  transform-style:preserve-3d;
  perspective:1800px;
}
.mv-spread{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:1fr;
}
.mv-page{
  position:relative;
  background:var(--mv-offwhite);
  overflow:hidden;
}
.mv-page-right{
  border-left:1px solid rgba(0,0,0,.08);
}
.mv-page.is-hidden{
  display:none;
}
.mv-page-wrap.is-spread .mv-spread{
  grid-template-columns:1fr 1fr;
}
.mv-page-wrap.is-spread .mv-page-right{
  display:block;
}
.mv-page-img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  background:var(--mv-offwhite);
}

.mv-turn-page{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  display:none;
  overflow:hidden;
  z-index:4;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  pointer-events:none;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.mv-turn-page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.mv-turn-page.is-right{ right:0; transform-origin:left center; display:block; }
.mv-turn-page.is-left{ left:0; transform-origin:right center; display:block; }
.mv-turn-page.is-right::after{
  background:linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,0) 38%, rgba(255,255,255,.08) 76%, rgba(0,0,0,.22));
}
.mv-turn-page.is-left::after{
  background:linear-gradient(270deg, rgba(0,0,0,.26), rgba(0,0,0,0) 38%, rgba(255,255,255,.08) 76%, rgba(0,0,0,.22));
}
.mv-turn-page-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--mv-offwhite);
}
.mv-fade-in{ animation:mvFade .22s ease; }
@keyframes mvFade{
  from{ opacity:0; transform:translateY(2px); }
  to  { opacity:1; transform:none; }
}

.mv-turn-page.mv-turn-next,
.mv-turn-page.mv-turn-prev{
  animation-duration:.65s;
  animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode:both;
}
.mv-turn-page.mv-turn-next{ animation-name:mvTurnNext; }
.mv-turn-page.mv-turn-prev{ animation-name:mvTurnPrev; }
.mv-turn-page.mv-turn-next::after,
.mv-turn-page.mv-turn-prev::after{
  animation:mvFoldShade .65s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.mv-is-turning .mv-spread{
  z-index:1;
}
@keyframes mvTurnNext{
  0%{
    transform:rotateY(0deg);
    filter:brightness(1);
  }
  50%{
    transform:rotateY(-90deg);
    filter:brightness(.82);
  }
  100%{
    transform:rotateY(-180deg);
    filter:brightness(.7);
  }
}
@keyframes mvTurnPrev{
  0%{
    transform:rotateY(0deg);
    filter:brightness(1);
  }
  50%{
    transform:rotateY(90deg);
    filter:brightness(.82);
  }
  100%{
    transform:rotateY(180deg);
    filter:brightness(.7);
  }
}
@keyframes mvFoldShade{
  0%, 100%{ opacity:.35; }
  50%{ opacity:.88; }
}

.mv-is-turning .mv-nav,
.mv-is-turning .mv-thumb,
.mv-is-turning .mv-fs-btn{
  pointer-events:none;
}

/* prev / next */
.mv-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:64px;
  background:rgba(26,28,24,.55);
  color:var(--mv-offwhite);
  border:1px solid rgba(255,255,255,.18);
  font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
  z-index:2;
}
.mv-nav:hover:not(:disabled){
  background:var(--mv-jacket);border-color:var(--mv-jacket);
}
.mv-nav:disabled{ opacity:.25; cursor:default; }
.mv-prev{ left:10px; }
.mv-next{ right:10px; }

/* ---------- controls bar ---------- */
.mv-controls{
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--mv-char);
  flex:0 0 auto;
}
.mv-controls-label{
  font-family:var(--mv-label);
  text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;font-weight:600;
  color:var(--mv-bone);
  flex:0 0 auto;padding-left:6px;
}
.mv-thumbs{
  display:flex;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  flex:1 1 auto;min-width:0;
  padding:2px 2px;
  scrollbar-width:thin;
  scrollbar-color:var(--mv-mute) transparent;
}
.mv-thumbs::-webkit-scrollbar{ height:6px; }
.mv-thumbs::-webkit-scrollbar-thumb{ background:var(--mv-mute); border-radius:3px; }
.mv-thumb{
  position:relative;flex:0 0 auto;
  width:44px;height:60px;
  padding:0;background:#222;
  border:1.5px solid rgba(255,255,255,.18);
  cursor:pointer;
  display:flex;align-items:flex-end;justify-content:flex-start;
  overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.mv-thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.mv-thumb:hover{ border-color:var(--mv-bone); }
.mv-thumb.is-active{
  border-color:var(--mv-jacket);
  box-shadow:0 0 0 1px var(--mv-jacket);
}
.mv-thumb-num{
  position:relative;z-index:1;
  font-family:var(--mv-label);
  font-size:10px;font-weight:700;
  color:var(--mv-offwhite);
  background:rgba(0,0,0,.55);
  padding:1px 4px;
  margin:0 0 2px 2px;
  line-height:1;
}

.mv-fs-btn{
  flex:0 0 auto;
  font-family:var(--mv-label);
  text-transform:uppercase;letter-spacing:.13em;
  font-size:12px;font-weight:600;
  padding:9px 14px;
  background:transparent;color:var(--mv-offwhite);
  border:1.5px solid rgba(255,255,255,.4);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.mv-fs-btn:hover{
  background:var(--mv-offwhite);color:var(--mv-char);border-color:var(--mv-offwhite);
}

.mv-empty{
  padding:40px;text-align:center;
  font-family:var(--mv-label);text-transform:uppercase;letter-spacing:.18em;
  color:var(--mv-mute);
}

/* ---------- fullscreen ---------- */
/* Native fullscreen */
.mv-root:fullscreen{
  width:100vw;height:100vh;max-height:none;border:0;
}
.mv-root:-webkit-full-screen{
  width:100vw;height:100vh;max-height:none;border:0;
}
/* CSS fallback when the native API isn't available or was rejected */
.mv-root.mv-fs{
  position:fixed;inset:0;
  width:100vw;height:100vh;max-height:none;
  z-index:9999;border:0;
}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  .mv-root{ height:78vh; min-height:420px; }
  .mv-topbar{ padding:10px 14px; }
  .mv-title{ font-size:15px; }
  .mv-counter{ font-size:11px; letter-spacing:.14em; }
  .mv-page-wrap{ max-width:calc(100% - 68px); }
  .mv-nav{ width:36px;height:54px;font-size:18px; }
  .mv-thumb{ width:34px;height:46px; }
  .mv-fs-btn{ padding:8px 10px;font-size:11px; }
}

@media (min-width: 1200px){
  .mv-root{ height:86vh; }
}