/* =====================================================
   YCHANGQUANRUN — Main Stylesheet
   Covers: index, about, products, contact
   ===================================================== */

/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:       #1C1C1C;
  --cream:     #F7F3EC;
  --sage:      #3D6B4F;
  --sage-l:    #5A9B6B;
  --sage-pale: #EBF2EC;
  --gold:      #C9A96E;
  --gold-l:    #E8D5A8;
  --muted:     #6B6761;
  --hh:        76px;
  --ease:      cubic-bezier(.4, 0, .2, 1);
}
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: #FAFAF7; color: var(--ink); line-height: 1.65; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.18; }
a   { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── HEADER ── */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; height: var(--hh);
  background: rgba(22,22,22,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.05); z-index: 999;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
#hdr.scrolled { background: rgba(14,14,14,.98); box-shadow: 0 6px 40px rgba(0,0,0,.3); }
#hdr nav { height: 100%; max-width: 1380px; margin: 0 auto; padding: 0 2.5rem; display: flex; align-items: center; gap: 2rem; }
.logo { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.logo img { border-radius: 8px; flex-shrink: 0; }
.logo-name { font-family: 'Playfair Display', serif; font-size: 1.18rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.logo-name span { display: block; font-family: 'DM Sans', sans-serif; font-size: .6rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
nav ul { list-style: none; display: flex; gap: .15rem; margin-left: auto; }
nav ul a { color: rgba(255,255,255,.7); font-size: .875rem; font-weight: 500; letter-spacing: .04em; padding: .48rem 1.05rem; border-radius: 6px; transition: color .25s, background .25s; position: relative; }
nav ul a:hover, nav ul a.act { color: #fff; background: rgba(255,255,255,.07); }
nav ul a.act::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 18px; height: 2px; background: var(--gold); border-radius: 2px; }

/* ── UTILITIES ── */
.tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); background: var(--sage-pale); padding: .32rem 1rem; border-radius: 20px; margin-bottom: 1rem; }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .82rem 2rem; border-radius: 6px; font-weight: 500; font-size: .9rem; letter-spacing: .04em; cursor: pointer; transition: all .3s var(--ease); border: 2px solid transparent; font-family: 'DM Sans', sans-serif; }
.btn-solid { background: var(--sage); color: #fff; }
.btn-solid:hover { background: transparent; border-color: var(--sage); color: var(--sage); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.clink { font-size: .84rem; font-weight: 600; color: var(--sage); letter-spacing: .04em; display: inline-flex; align-items: center; gap: .4rem; transition: gap .3s; }
.clink:hover { gap: .75rem; }
.fi { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fi.vis { opacity: 1; transform: none; }
.sec-head { text-align: center; margin-bottom: 3.5rem; }
.sec-head h2 { font-size: clamp(1.7rem,2.5vw,2.6rem); margin-bottom: .75rem; }
.sec-head p  { color: var(--muted); font-size: 1rem; max-width: 480px; margin: 0 auto; }

/* ── PAGE HERO (About & Contact) ── */
.page-hero { height: 340px; margin-top: var(--hh); position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-deco { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); opacity: .1; }
.hero-deco svg { width: 300px; }
.hero-dim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.12) 100%); }
.hero-content { position: relative; z-index: 2; max-width: 1300px; margin: 0 auto; padding: 0 2.5rem 2.8rem; width: 100%; color: #fff; }
.page-tag { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .7rem; }
.hero-content h1 { font-size: clamp(1.8rem,3.2vw,2.8rem); }


/* ── Static Hero (index page) ── */
.hero-static {
  margin-top: var(--hh);
  height: 100vh; min-height: 520px;
  background: linear-gradient(135deg,
    #0d2418 0%,
    #1a3d28 20%,
    #2d6b45 50%,
    #3d8a58 75%,
    #4fa86e 100%
  );
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Subtle noise overlay */
.hero-static::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(255,255,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0,0,0,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.hero-static-body {
  position: relative; z-index: 1;
  max-width: 1380px; margin: 0 auto;
  padding: 0 9%;
  color: #fff;
}

.hero-static-body .eyebrow {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}

.hero-static-body h1 {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  color: #fff; line-height: 1.12;
  text-shadow: 0 2px 40px rgba(0,0,0,0.25);
  margin-bottom: 1.4rem;
}

.hero-static-body p {
  color: rgba(255,255,255,.78);
  font-size: 1.1rem; line-height: 1.75;
  max-width: 520px; margin-bottom: 2.8rem;
}

/* ── CAROUSEL ── */
.carousel { position: relative; width: 100%; height: 100vh; min-height: 520px; overflow: hidden; margin-top: var(--hh); }
.slides { position: relative; width: 100%; height: 100%; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.slide.on { opacity: 1; z-index: 1; }
.slide-bg { position: absolute; inset: 0; background-color: #1e3a2a; background-size: cover; background-position: center; transition: transform 9s linear; }
.slide.on .slide-bg { transform: scale(1.05); }
.slide-dim { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 55%, transparent 100%); }
.scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8%; pointer-events: none; z-index: 1; opacity: .18; }
.scene svg { width: min(420px,45vw); height: auto; }
.slide-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 9%; z-index: 2; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.slide-body h1 { font-size: clamp(2rem,4.8vw,4.2rem); color: #fff; max-width: 640px; text-shadow: 0 2px 28px rgba(0,0,0,.4); margin-bottom: 1.1rem; }
.slide-body p { color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 460px; line-height: 1.75; margin-bottom: 2.4rem; }
.slide-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.c-dots { position: absolute; bottom: 2.2rem; left: 9%; display: flex; gap: .55rem; z-index: 10; }
.c-dot { width: 32px; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; cursor: pointer; transition: all .35s; }
.c-dot.on { width: 54px; background: var(--gold); }
.c-arrows { position: absolute; bottom: 1.8rem; right: 4%; display: flex; gap: .6rem; z-index: 10; }
.c-arr { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: all .3s; backdrop-filter: blur(8px); }
.c-arr:hover { background: var(--gold); border-color: var(--gold); color: #1C1C1C; }

/* ── HOME ABOUT SNAP ── */
.about-snap { padding: 6.5rem 0; background: #FAFAF7; }
.about-snap .in { max-width: 1300px; margin: 0 auto; padding: 0 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-snap h2 { font-size: clamp(1.7rem,2.5vw,2.6rem); margin-bottom: 1.5rem; }
.about-snap p  { color: var(--muted); font-size: 1.02rem; line-height: 1.82; margin-bottom: 2.2rem; }
.img-frame { position: relative; }
.img-frame::after { content: ''; position: absolute; bottom: -18px; right: -18px; width: 55%; height: 55%; border: 2.5px solid var(--gold-l); border-radius: 14px; z-index: -1; }

/* ── HOME PRODUCTS SNAP ── */
.prods-snap { padding: 6.5rem 0; background: var(--cream); }
.prods-snap .in { max-width: 1300px; margin: 0 auto; padding: 0 2.5rem; }
.pcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem; }
.pcard { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,.06); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,0,0,.12); }
.pcard-body { padding: 1.5rem; }
.pcard-body h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.pcard-body p  { font-size: .88rem; color: var(--muted); margin-bottom: 1.1rem; }

/* ── FOOTER ── */
.foot { background: #141414; color: rgba(255,255,255,.6); padding: 4rem 0 2rem; }
.foot-in { max-width: 1300px; margin: 0 auto; padding: 0 2.5rem; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.foot-brand .fn { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: #fff; margin-bottom: .9rem; }
.foot-brand p   { font-size: .88rem; line-height: 1.72; max-width: 270px; }
.foot-col h4 { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.foot-col ul { list-style: none; }
.foot-col ul li { margin-bottom: .5rem; }
.foot-col ul li a { font-size: .88rem; transition: color .25s; }
.foot-col ul li a:hover { color: #fff; }
.fc-item { font-size: .88rem; margin-bottom: .5rem; }
.foot-btm { text-align: center; font-size: .78rem; color: rgba(255,255,255,.25); }

/* ── ABOUT PAGE ── */
.about-body { max-width: 1300px; margin: 0 auto; padding: 5rem 2.5rem; }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-bottom: 5rem; }
.about-intro h2 { font-size: clamp(1.6rem,2.4vw,2.3rem); margin-bottom: 1.4rem; }
.about-intro p  { color: var(--muted); line-height: 1.85; margin-bottom: 1.1rem; font-size: 1rem; }
.mission-box { background: var(--sage-pale); border-left: 3px solid var(--sage); padding: 1.4rem 1.6rem; border-radius: 0 8px 8px 0; margin-top: 1.5rem; }
.mission-box h4 { font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: .5rem; }
.mission-box p  { color: var(--ink); line-height: 1.72; font-size: .95rem; margin: 0; }
.timeline-sec { background: var(--cream); padding: 5.5rem 0; }
.tl-inner { max-width: 1300px; margin: 0 auto; padding: 0 2.5rem; }
.tl-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; position: relative; }
.tl-grid::before { content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(to right, transparent, var(--gold-l) 20%, var(--gold-l) 80%, transparent); }
.tl-item { text-align: center; padding-top: .5rem; }
.tl-year { font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 700; color: var(--sage); margin-bottom: .5rem; }
.tl-dot { width: 14px; height: 14px; background: var(--gold); border-radius: 50%; margin: .8rem auto 1.1rem; border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--gold); position: relative; z-index: 1; }
.tl-item p { font-size: .88rem; color: var(--muted); line-height: 1.6; }
.adv-sec   { padding: 5.5rem 0; background: #FAFAF7; }
.adv-inner { max-width: 1300px; margin: 0 auto; padding: 0 2.5rem; }
.adv-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.4rem; }
.adv-row:last-child { margin-bottom: 0; }
.adv-card  { border-radius: 14px; overflow: hidden; position: relative; height: 340px; cursor: default; }
.adv-img-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.adv-card:hover .adv-img-bg { transform: scale(1.05); }

.adv-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adv-dim   { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.05) 60%, transparent 100%); z-index: 2; }
.adv-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.8rem 1.6rem; color: #fff; z-index: 3; }
.adv-label h3 { font-size: 1.12rem; margin-bottom: .25rem; }
.adv-label p  { font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.5; }

/* ── PRODUCTS PAGE ── */
.page-wrap { max-width: 1380px; margin: 0 auto; padding: calc(var(--hh) + 3.5rem) 2.5rem 6rem; }
.cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.cat-card { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; height: 320px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cat-card:hover { transform: translateY(-8px); box-shadow: 0 24px 56px rgba(0,0,0,.2); }
.cat-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat-card:hover .cat-bg-img { transform: scale(1.06); }
.cat-deco { position: absolute; top: 1.8rem; right: 1.8rem; font-size: 4rem; opacity: .2; z-index: 1; transition: opacity .4s, transform .4s; }
.cat-card:hover .cat-deco { opacity: .35; transform: scale(1.15) rotate(5deg); }
.cat-dim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 55%, transparent 100%); transition: background .4s; z-index: 1; }
.cat-card:hover .cat-dim { background: linear-gradient(to top, rgba(61,107,79,.78) 0%, rgba(0,0,0,.08) 55%, transparent 100%); }
.cat-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 2rem 2.4rem; color: #fff; z-index: 2; }
.cat-tag-label { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.cat-body h3 { font-size: 1.55rem; margin-bottom: .55rem; }
.cat-body p  { font-size: .87rem; color: rgba(255,255,255,.75); line-height: 1.55; margin-bottom: 1.2rem; }
.cat-cta { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; letter-spacing: .04em; transition: border-color .3s, color .3s; }
.cat-card:hover .cat-cta { border-color: var(--gold); color: var(--gold); }
#list-view { display: none; }
#list-view.show { display: block; }
#cat-view.hide  { display: none; }
.back-btn { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 500; color: var(--sage); cursor: pointer; margin-bottom: 2.5rem; padding: .5rem 0; background: none; border: none; font-family: 'DM Sans', sans-serif; transition: gap .3s; }
.back-btn:hover { gap: .9rem; }
.list-header { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--cream); }
.list-header h2 { font-size: clamp(1.6rem,2.4vw,2.3rem); }
.list-header .count { font-size: .85rem; color: var(--muted); font-weight: 400; }
.products-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.prod-item { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,.06); display: grid; grid-template-columns: 220px 1fr; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.prod-item:hover { box-shadow: 0 10px 36px rgba(0,0,0,.1); transform: translateY(-4px); }
.prod-img { height: 180px; overflow: hidden; flex-shrink: 0; transition: transform .5s; }
.prod-item:hover .prod-img { transform: scale(1.06); }
.prod-body { padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.prod-badge { display: inline-block; background: var(--sage-pale); color: var(--sage); font-size: .72rem; font-weight: 600; letter-spacing: .08em; padding: .28rem .75rem; border-radius: 20px; margin-bottom: .75rem; }
.prod-body h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.prod-body p  { font-size: .88rem; color: var(--muted); line-height: 1.65; }

/* ── CONTACT PAGE ── */
.contact-wrap { max-width: 1300px; margin: 0 auto; padding: 5rem 2.5rem 6rem; display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
.info-side h2 { font-size: clamp(1.6rem,2.2vw,2.2rem); margin-bottom: .75rem; }
.info-side > p { color: var(--muted); margin-bottom: 2.5rem; line-height: 1.78; font-size: 1rem; }
.ci-card { padding: 1.2rem 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.ci-card:last-child { border: none; }
.ci-label { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: .35rem; }
.ci-value { font-size: .97rem; color: var(--ink); line-height: 1.5; }
.map-side h3 { font-family: 'Playfair Display', serif; font-size: 1.35rem; margin-bottom: 1.4rem; }
.map-box { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 28px rgba(0,0,0,.1); }



/* ── Coming Soon state ── */
.prod-coming-soon {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5rem 2rem; text-align: center;
  background: #fff; border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
}
.prod-cs-icon { margin-bottom: 1.5rem; opacity: .7; }
.prod-coming-soon h3 { font-size: 1.5rem; margin-bottom: .75rem; color: var(--ink); }
.prod-coming-soon p  { color: var(--muted); line-height: 1.72; font-size: .97rem; max-width: 400px; }
.prod-coming-soon a  { color: var(--sage); font-weight: 500; }
.prod-coming-soon a:hover { text-decoration: underline; }

/* ── Video card play button ── */
.adv-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4; pointer-events: none;
  transition: opacity .3s;
}
.adv-video-card:hover .adv-play-btn { opacity: .7; }
.adv-video-card.playing .adv-play-btn { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1280px) {
  .cat-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-card { height: 280px; }
  .products-grid { grid-template-columns: 1fr; }
  .prod-item { grid-template-columns: 1fr; }
  .prod-img { height: 200px; }
}
@media (max-width: 900px) {
  nav ul { display: none; }
  .about-snap .in { grid-template-columns: 1fr; gap: 2.5rem; }
  .img-frame::after { display: none; }
  .pcards { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 2rem; }
  .about-intro { grid-template-columns: 1fr; gap: 2.5rem; }
  .tl-grid { grid-template-columns: 1fr 1fr; }
  .tl-grid::before { display: none; }
  .adv-row { grid-template-columns: 1fr; }
  .adv-card { height: 260px; }
  .contact-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .cat-card { height: 220px; }
  .cat-body h3 { font-size: 1.1rem; }
  .cat-body p  { display: none; }
}
@media (max-width: 600px) {
  :root { --hh: 62px; }
  #hdr nav { padding: 0 1.25rem; }
  .slide-body { padding: 0 6%; }
  .about-snap .in, .prods-snap .in, .about-body, .tl-inner,
  .adv-inner, .page-wrap, .contact-wrap, .foot-in {
    padding-left: 1.25rem; padding-right: 1.25rem;
  }
}


/* ── ABOUT VIDEO CARD FIX ── */
.adv-video-card {
  cursor: pointer;
  isolation: isolate;
}

.adv-video-card .adv-poster {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility .28s ease, transform .55s var(--ease);
}

.adv-video-card .adv-video,
.adv-video-card video {
  z-index: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  background: #111;
  transition: opacity .28s ease, visibility .28s ease;
  transform: none !important;
}

.adv-video-card.playing .adv-poster {
  opacity: 0;
  visibility: hidden;
}

.adv-video-card.playing .adv-video,
.adv-video-card.playing video {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.adv-video-card .adv-dim,
.adv-video-card .adv-label,
.adv-video-card .adv-play-btn {
  pointer-events: none;
}

.adv-video-card.loading .adv-play-btn {
  opacity: .35;
}

.adv-video-card.loading .adv-play-btn svg {
  animation: adv-video-pulse .8s ease-in-out infinite alternate;
}

.adv-video-card.playing .adv-play-btn {
  opacity: 0;
  visibility: hidden;
}

.adv-video-error {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(82%, 420px);
  transform: translate(-50%, -50%);
  display: none;
  padding: .8rem 1rem;
  border-radius: 8px;
  background: rgba(15, 15, 15, .88);
  color: #fff;
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}

.adv-video-error.show {
  display: block;
}

@keyframes adv-video-pulse {
  from { transform: scale(.92); opacity: .55; }
  to   { transform: scale(1.04); opacity: 1; }
}