/* ==========================================================================
   Competition Demo Videos — page styles
   ========================================================================== */

.demo-videos-page{
  --demo-teal:#337f79;
  --demo-teal-deep:#194a43;
  --demo-gold:#d2a15e;
  --demo-rose:#d94976;
  background:
    radial-gradient(circle at 4% 17%,rgba(69,170,162,.08),transparent 23%),
    radial-gradient(circle at 97% 53%,rgba(217,73,118,.065),transparent 26%),
    linear-gradient(180deg,var(--cream) 0%,#fffdf8 50%,#f7eddf 100%);
}

/* ---------- Hero ---------- */
.demo-videos-page .demo-hero{
  background:
    radial-gradient(circle at 88% 17%,rgba(210,161,94,.32),transparent 25%),
    radial-gradient(circle at 10% 94%,rgba(217,73,118,.2),transparent 31%),
    radial-gradient(circle at 58% 4%,rgba(69,170,162,.16),transparent 28%),
    linear-gradient(135deg,#21594f 0%,#173a34 52%,#09241f 100%);
}
.demo-videos-page .demo-hero::after{
  content:"映";right:-.055em;top:50%;font-size:clamp(280px,39vw,560px);
  color:rgba(255,255,255,.034);
}
.demo-videos-page .demo-hero::before{
  background-image:url("../img/design/patterns/wave-gold.svg");
  background-size:720px 260px;opacity:.13;
  -webkit-mask-image:linear-gradient(112deg,transparent 2%,#000 30%,#000 78%,transparent 100%);
  mask-image:linear-gradient(112deg,transparent 2%,#000 30%,#000 78%,transparent 100%);
  animation-duration:74s;
}
.demo-hero__copy{min-width:0}
.demo-hero__panel{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.145),rgba(255,255,255,.052));
}
.demo-hero__panel::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background:url("../img/design/patterns/fret-teal.svg") repeat;
  background-size:480px 160px;mix-blend-mode:screen;
}
.demo-hero__panel::after{
  content:"播";position:absolute;right:-.06em;bottom:-.3em;z-index:-1;pointer-events:none;
  color:rgba(255,255,255,.045);font-family:Georgia,"Songti TC","Noto Serif TC",serif;
  font-size:158px;line-height:1;font-weight:700;
}
.demo-hero__panel-note{
  position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:11px;align-items:start;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.13);color:rgba(251,245,234,.7);
  font-size:12.5px;line-height:1.65;
}
.demo-hero__panel-note::before{
  content:"▶";color:#f2c87d;font-size:10px;line-height:1.9;
}
.demo-hero__quick{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;
}
.demo-hero__quick span{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
  color:rgba(251,245,234,.68);font-size:11.5px;font-weight:620;
}
.demo-hero__quick span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#82d8cf;
}

/* ---------- Video library ---------- */
.demo-library{
  padding:clamp(72px,9vw,126px) 0 clamp(76px,9vw,122px);
  background:
    radial-gradient(circle at 50% 0,rgba(69,170,162,.075),transparent 31%),
    linear-gradient(180deg,rgba(255,250,241,.96),rgba(255,255,255,.98));
}
.demo-library__head{
  display:grid;gap:18px 44px;align-items:end;margin-bottom:clamp(36px,5vw,58px);
}
.demo-library__head h2{
  max-width:18ch;font-size:clamp(34px,4.8vw,58px);line-height:1.06;
  font-weight:750;letter-spacing:-.045em;text-wrap:balance;
}
.demo-library__head > p{
  max-width:58ch;color:var(--muted);font-size:clamp(15px,1.5vw,18px);line-height:1.75;
}
.demo-library__grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:stretch;
}
.demo-card{
  --demo-accent:var(--demo-teal);
  --demo-soft:#e8f3f0;
  position:relative;isolation:isolate;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;
  border:1px solid rgba(83,119,111,.18);border-radius:28px;background:#fff;
  box-shadow:0 30px 78px -58px rgba(11,28,27,.8);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s var(--ease-soft);
}
.demo-card:nth-child(2){--demo-accent:var(--demo-rose);--demo-soft:#fcebf1}
.demo-card:nth-child(3){--demo-accent:var(--demo-gold);--demo-soft:#fbf2e2}
.demo-card::before{
  content:"";position:absolute;inset:0 0 auto;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--demo-accent),color-mix(in srgb,var(--demo-accent) 28%,#fff));
}
.demo-card::after{
  content:attr(data-mark);position:absolute;right:8px;bottom:-35px;z-index:-1;pointer-events:none;
  color:var(--demo-accent);opacity:.045;font-family:Georgia,"Songti TC","Noto Serif TC",serif;
  font-size:130px;line-height:1;font-weight:700;
}
.demo-card:hover{
  transform:translateY(-6px);border-color:color-mix(in srgb,var(--demo-accent) 38%,transparent);
  box-shadow:0 40px 92px -58px color-mix(in srgb,var(--demo-accent) 45%,#17332f);
}
.demo-card__copy{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(23px,3vw,34px);
}
.demo-card__kicker{
  display:flex;align-items:center;gap:9px;margin-bottom:13px;
  color:var(--demo-accent);font-size:11.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
}
.demo-card__kicker span{
  display:grid;place-items:center;width:29px;height:29px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--demo-accent) 22%,#fff);
  background:var(--demo-soft);font-family:Georgia,serif;font-size:12px;letter-spacing:0;
}
.demo-card h3{
  max-width:21ch;color:var(--ink);font-size:clamp(22px,2.6vw,31px);
  line-height:1.2;font-weight:735;letter-spacing:-.035em;text-wrap:balance;
}
.demo-card__sub{
  margin-top:7px;color:var(--demo-accent);font-size:12.5px;font-weight:720;
  letter-spacing:.03em;
}
.demo-card__desc{
  max-width:55ch;margin-top:15px;color:var(--muted);font-size:14px;line-height:1.7;
}
.demo-card__footer{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;padding-top:22px;
}
.demo-card__open{
  display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 16px;
  border:1px solid color-mix(in srgb,var(--demo-accent) 35%,#fff);border-radius:999px;
  background:var(--demo-soft);color:var(--demo-accent);font-size:12.5px;font-weight:760;
  transition:background .3s var(--ease-soft),color .3s var(--ease-soft),transform .35s var(--ease);
}
.demo-card__open:hover{background:var(--demo-accent);color:#fff;transform:translateY(-2px)}
.demo-card__format{
  display:inline-flex;align-items:center;gap:7px;color:var(--muted-2);
  font-size:11px;font-weight:660;letter-spacing:.08em;text-transform:uppercase;
}
.demo-card__format::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--demo-accent);opacity:.66;
}
.demo-card__visual{
  position:relative;isolation:isolate;overflow:hidden;margin:0 clamp(12px,2vw,18px) clamp(12px,2vw,18px);
  border-radius:20px;background:
    radial-gradient(circle at 50% 40%,rgba(69,170,162,.2),transparent 55%),
    #102c28;
  box-shadow:0 22px 52px -38px rgba(11,28,27,.9);
}
.demo-card__visual::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.demo-card video{
  display:block;width:100%;aspect-ratio:16/9;background:#102c28;object-fit:contain;
}
.demo-card__video-label{
  position:absolute;left:13px;top:13px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;background:rgba(9,29,26,.76);
  color:rgba(255,255,255,.82);font-size:10.5px;font-weight:720;letter-spacing:.09em;
  text-transform:uppercase;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.demo-card__video-label::before{
  content:"";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;
  border-left:7px solid #f2c87d;
}
.demo-card--featured .demo-card__copy{order:1}
.demo-card--featured .demo-card__visual{order:2}
.demo-library__note{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  margin-top:28px;padding:17px 19px;border:1px dashed rgba(83,119,111,.28);border-radius:18px;
  background:rgba(255,255,255,.62);color:var(--muted);font-size:12.5px;line-height:1.68;
}
.demo-library__note > span:first-child{
  display:grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:var(--demo-teal);color:#fff;font-family:Georgia,serif;font-size:13px;font-weight:800;
}

/* ---------- CTA ---------- */
.demo-next{
  padding:clamp(66px,8vw,104px) 0;
  background:linear-gradient(135deg,#18443d,#0d2a25 62%,#091f1c);
  color:var(--cream);
}
.demo-next__panel{
  position:relative;isolation:isolate;overflow:hidden;display:grid;gap:26px;align-items:end;
  padding:clamp(28px,5vw,52px);border:1px solid rgba(255,255,255,.13);border-radius:30px;
  background:rgba(255,255,255,.07);box-shadow:0 34px 80px -54px #000;
}
.demo-next__panel::after{
  content:"作";position:absolute;right:-.04em;bottom:-.31em;z-index:-1;pointer-events:none;
  color:rgba(255,255,255,.045);font-family:Georgia,"Songti TC","Noto Serif TC",serif;
  font-size:190px;line-height:1;font-weight:700;
}
.demo-next h2{
  max-width:18ch;margin-top:9px;font-size:clamp(30px,4.2vw,48px);
  line-height:1.08;font-weight:740;letter-spacing:-.04em;
}
.demo-next p{max-width:60ch;margin-top:13px;color:rgba(251,245,234,.67);font-size:15px;line-height:1.72}
.demo-next__actions{display:flex;flex-wrap:wrap;gap:12px}
.demo-next__actions .btn--ghost{border-color:rgba(251,245,234,.34);color:#fff}

/* ---------- Language treatment ---------- */
html.lang-en .demo-hero h1{font-size:clamp(42px,6.8vw,80px);line-height:.98}
html.lang-en .demo-card h3{max-width:24ch;font-size:clamp(21px,2.3vw,28px);line-height:1.25}
html.lang-en .demo-card__desc{font-size:14.3px}
html.lang-en .demo-library__head h2{max-width:20ch}

/* ---------- Responsive ---------- */
@media(min-width:760px){
  .demo-library__head{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)}
  .demo-library__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-card--featured{grid-column:1/-1}
  .demo-next__panel{grid-template-columns:minmax(0,1fr) auto}
}
@media(min-width:1020px){
  .demo-card--featured{
    display:grid;grid-template-columns:minmax(290px,.74fr) minmax(0,1.26fr);align-items:stretch;
  }
  .demo-card--featured .demo-card__copy{order:1;justify-content:center;padding:clamp(30px,4vw,48px)}
  .demo-card--featured .demo-card__visual{
    order:2;margin:18px 18px 18px 0;min-height:100%;align-self:stretch;
  }
  .demo-card--featured video{height:100%;min-height:360px;aspect-ratio:auto}
}
@media(max-width:640px){
  .demo-videos-page .demo-hero{padding-top:calc(var(--nav-h) + 38px)}
  .demo-videos-page .demo-hero::after{font-size:clamp(220px,62vw,340px)}
  .demo-hero__panel{padding:18px}
  .demo-card{border-radius:23px}
  .demo-card__copy{padding:21px 18px 20px}
  .demo-card h3{font-size:22px}
  .demo-card__visual{margin:0 10px 10px;border-radius:17px}
  .demo-library__note{padding:15px}
  .demo-next__panel{padding:25px 19px;border-radius:25px}
  .demo-next__actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .demo-videos-page .demo-hero::before{animation:none!important}
  .demo-card,
  .demo-card__open{transition:none!important}
  .demo-card:hover,
  .demo-card__open:hover{transform:none}
}