/* Study Chinese — animated feature trailers + iOS widget showcase.
   Pure-CSS device mockups so each feature "plays" in the browser. */

/* ============ TRAINING CAMP — horizontal scroll pan ============ */
.cam { position: relative; background: var(--surface); border-block: 1px solid var(--border); }
.cam-pin { padding: clamp(46px, 7vw, 88px) 0; }
.cam-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(26px, 4vw, 44px); }
.cam-head .modes-head { text-align: left; margin: 0; max-width: 640px; }
.cam-hint { display: flex; align-items: center; gap: 12px; flex: none; color: var(--ink2); font-size: .86rem; font-weight: 600; }
.cam-progress { width: clamp(96px, 14vw, 170px); height: 6px; border-radius: 999px; background: var(--jade-soft); overflow: hidden; }
.cam-bar { display: block; height: 100%; width: 12%; border-radius: 999px; background: var(--jade-grad); }
.cam-track { display: flex; gap: clamp(18px, 2.4vw, 36px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px clamp(16px, 4vw, 44px) 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cam-track::-webkit-scrollbar { display: none; }
.cam-panel { scroll-snap-align: center; flex: none; width: min(88vw, 880px); display: grid; grid-template-columns: 248px 1fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
.cam-phone { width: 248px; aspect-ratio: 1 / 2.05; flex: none; border-radius: 40px; padding: 8px; background: linear-gradient(150deg, #1a2620, #0c130f); box-shadow: var(--shadow-xl), 0 0 0 2px rgba(11,60,35,.12); position: relative; }
.cam-phone::after { content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 74px; height: 19px; background: #0a0f0c; border-radius: 999px; z-index: 2; }
.cam-screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #0e1812; }
.cam-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cam-num { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--jade); opacity: .22; }
.cam-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.12; margin: .22em 0 .45em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cam-tag { font-family: var(--f-display); font-weight: 800; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-soft); padding: 5px 11px; border-radius: 999px; }
.cam-sub { color: var(--ink2); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 40ch; }
/* desktop pinned scrub mode (toggled by JS) */
.cam.cam-on .cam-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.cam.cam-on .cam-track { overflow: visible; scroll-snap-type: none; will-change: transform; }

/* ============ WIDGETS (home + lock screen) ============ */
.widgets { padding: var(--pad) 0; background: linear-gradient(180deg, var(--paper), var(--surface) 60%, var(--paper)); overflow: clip; }
.wg-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
.wg-copy h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; margin-bottom: 18px; }
.wg-copy h2 .hl { color: var(--jade-deep); }
.wg-body { color: var(--ink2); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 46ch; margin-bottom: 24px; }
.wg-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.wg-points li { display: flex; gap: 12px; align-items: flex-start; }
.wg-points .wg-pic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--jade-soft); color: var(--jade-deep); box-shadow: var(--hi); }
.wg-points .wg-pic .ic { width: 20px; height: 20px; }
.wg-points b { font-family: var(--f-display); font-weight: 700; display: block; font-size: 1rem; }
.wg-points span { color: var(--ink2); font-size: .95rem; }

/* device stage: lock-screen in front, home-screen behind */
.wg-stage { position: relative; min-height: 560px; }
.wg-phone { position: absolute; top: 50%; left: 50%; width: clamp(206px, 22vw, 250px); aspect-ratio: 1 / 2.05; border-radius: 44px; padding: 9px; background: linear-gradient(150deg, #1a2620, #0c130f); box-shadow: var(--shadow-xl), 0 0 0 2px rgba(11,60,35,.14); will-change: transform; }
.wg-phone::after { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 78px; height: 20px; background: #0a0f0c; border-radius: 999px; z-index: 4; }
.wg-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background:
  radial-gradient(120% 80% at 20% 0%, #BdF0CE 0%, transparent 55%),
  radial-gradient(120% 90% at 90% 100%, #8FE6B0 0%, transparent 55%),
  linear-gradient(160deg, #DFF6E6, #C7EED6 60%, #A9E4C0); }
.wg-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 120%, rgba(21,162,74,.22), transparent 70%); }

.wg-home { transform: translate(-14%, -52%) rotate(3deg); z-index: 3; }
.wg-lock { transform: translate(-86%, -44%) rotate(-3deg); z-index: 1; }
.js .reveal.pop .wg-home { opacity: 0; }
.js .reveal.pop.in .wg-home { opacity: 1; transition: opacity .7s var(--ease-out) .15s; }

/* widget card base */
.wg-card { background: rgba(247,255,246,.96); border-radius: 17px; box-shadow: 0 10px 24px -12px rgba(6,40,24,.5); -webkit-backdrop-filter: blur(2px); }
.wg-tile { display: grid; place-items: center; font-family: var(--f-hanzi); font-weight: 700; color: #fff; background: linear-gradient(135deg, #59D86C, #159447); border-radius: 7px; flex: none; }

/* ---- lock screen ---- */
.wg-lockscreen { padding: 30px 16px 18px; display: flex; flex-direction: column; align-items: center; }
.wg-ls-date { font-family: var(--f-body); font-weight: 600; color: rgba(8,40,24,.7); font-size: .76rem; margin-top: 18px; letter-spacing: .01em; }
.wg-ls-time { font-family: var(--f-display); font-weight: 700; color: #0a2e1a; font-size: 4rem; line-height: .9; letter-spacing: -.03em; }
.wg-acc { margin-top: auto; width: 100%; }
.wg-acc-rect { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 15px; background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wg-acc-rect .wg-tile { width: 22px; height: 22px; font-size: 13px; }
.wg-acc-hz { font-family: var(--f-hanzi); font-weight: 700; color: #0a2e1a; font-size: 1.2rem; line-height: 1.05; }
.wg-acc-py { font-family: var(--f-display); font-weight: 700; color: var(--jade-deep); font-size: .76rem; }
.wg-acc-m { color: rgba(8,40,24,.7); font-size: .68rem; font-weight: 600; margin-top: 1px; }

/* ---- home screen ---- */
.wg-homescreen { padding: 34px 14px 14px; display: flex; flex-direction: column; gap: 11px; }
.wg-vocab { padding: 12px 13px; }
.wg-w-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.wg-w-head .wg-tile { width: 18px; height: 18px; font-size: 11px; }
.wg-w-level { font-family: var(--f-display); font-weight: 800; font-size: .56rem; letter-spacing: .14em; color: var(--ink2); }
.wg-w-body { display: flex; align-items: center; gap: 12px; }
.wg-w-hz { font-family: var(--f-hanzi); font-weight: 500; color: var(--ink); font-size: 2.5rem; line-height: 1; }
.wg-w-py { display: block; font-family: var(--f-display); font-weight: 700; color: var(--jade-deep); font-size: .92rem; }
.wg-w-m { display: block; color: var(--ink2); font-size: .76rem; font-weight: 600; margin-top: 2px; }
.wg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.wg-small { padding: 11px 12px; display: flex; flex-direction: column; min-height: 96px; }
.wg-due-streak { font-family: var(--f-display); font-weight: 700; color: var(--gold-deep); font-size: .62rem; }
.wg-due-n { font-family: var(--f-display); font-weight: 800; color: var(--ink); font-size: 2rem; line-height: 1; margin-top: 2px; }
.wg-due-lab { color: var(--ink2); font-size: .64rem; font-weight: 600; }
.wg-due-btn { margin-top: auto; text-align: center; background: var(--jade); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .64rem; padding: 5px; border-radius: 9px; }
.wg-goal { align-items: center; justify-content: center; gap: 6px; }
.wg-ring-wrap { position: relative; display: grid; place-items: center; }
.wg-ring { width: 62px; height: 62px; transform: rotate(-90deg); }
.wg-ring-bg { fill: none; stroke: rgba(21,162,74,.16); stroke-width: 8; }
.wg-ring-fg { fill: none; stroke: var(--jade); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 163; stroke-dashoffset: 163; }
.js .wg-stage.in .wg-ring-fg { animation: ring-fill 1.3s var(--ease-out) .4s forwards; }
@keyframes ring-fill { to { stroke-dashoffset: 49; } } /* ~70% */
.wg-goal-c { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.wg-goal-n { font-family: var(--f-display); font-weight: 800; color: var(--ink); font-size: .92rem; }
.wg-goal-d { color: var(--ink2); font-size: .56rem; font-weight: 600; }
.wg-goal-lab { color: var(--ink2); font-size: .62rem; font-weight: 700; }
.wg-dock { margin-top: auto; display: flex; justify-content: center; gap: 12px; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wg-dock img, .wg-dock i { width: 30px; height: 30px; border-radius: 8px; display: block; }
.wg-dock i { background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.25)); }

/* cycling word flip */
.wg-flip { animation: wg-flip .5s var(--ease-out); }
@keyframes wg-flip { 0% { opacity: 0; transform: translateY(7px) rotateX(-32deg); } 100% { opacity: 1; transform: none; } }

/* gentle device float */
.wg-lock { animation: wg-bob-a 6s var(--ease-in-out) infinite alternate; }
.wg-home { animation: wg-bob-b 7s var(--ease-in-out) infinite alternate; }
@keyframes wg-bob-a { to { transform: translate(-86%, -40%) rotate(-3deg); } }
@keyframes wg-bob-b { to { transform: translate(-14%, -56%) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .wg-lock, .wg-home { animation: none; }
  .js .wg-stage.in .wg-ring-fg { animation: none; stroke-dashoffset: 49; }
  .wg-flip { animation: none; }
}