/* =========================================================
   STUDY ABROAD — premium motion layer
   Loaded only on study-abroad.html. Every hidden start state
   is gated behind html.js-motion, so without JS (or with
   reduced motion) the page renders exactly as before.
   ========================================================= */
:root {
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Scroll progress hairline ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, #f3b48a 100%);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Page intro veil ---------- */
.js-motion body.page-study:not(.veil-done)::after {
  position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  content: ""; background: #161c1a;
  animation: veil-lift 1.25s var(--ease-soft) 0.15s both;
}
.js-motion body.page-study:not(.veil-done)::before {
  content: ""; position: fixed; z-index: 2001; pointer-events: none; left: 50%; top: 50%; width: 120px; height: 1px;
  margin-left: -60px; background: var(--orange); transform-origin: 0 50%;
  animation: veil-line 0.7s var(--ease-lux) both, lux-fade 0.4s ease 0.6s reverse both;
}
@keyframes veil-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes veil-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Hero ---------- */
.js-motion .study-hero-photo img {
  animation: hero-kenburns 3.2s var(--ease-lux) 0.2s both;
  will-change: transform;
}
@keyframes hero-kenburns {
  from { opacity: 0; transform: scale(1.18); filter: saturate(0.4); }
  to   { opacity: 0.6; transform: scale(1.04); filter: saturate(1); }
}
.study-hero-photo img { scale: 1; translate: var(--hx, 0) var(--hy, 0); }

/* soft light that follows the cursor */
.hero-glow {
  position: absolute; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(237, 149, 99, 0.16) 0%, rgba(237, 149, 99, 0.05) 38%, transparent 68%);
  transform: translate3d(var(--gx, 50vw), var(--gy, 40vh), 0);
  transition: opacity 0.8s ease;
  mix-blend-mode: screen;
}
.study-hero:hover .hero-glow { opacity: 1; }

.study-hero-inner { translate: 0 var(--hero-shift, 0); opacity: var(--hero-fade, 1); }

.js-motion .breadcrumb,
.js-motion .study-hero-lead,
.js-motion .study-hero-actions {
  animation: lux-rise 1.2s var(--ease-lux) both;
}
.js-motion .breadcrumb { animation-delay: 0.9s; }
.js-motion .study-hero-kicker { animation: lux-fade 1s ease 1s both; }
.js-motion .study-hero-kicker::before { transform-origin: 0 50%; animation: line-draw 1.1s var(--ease-lux) 1.05s both; }

.js-motion .study-hero h1 .hero-line { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.js-motion .study-hero h1 .hero-line > .line-inner {
  display: inline-block;
  animation: line-up 1.3s var(--ease-lux) both;
}
.js-motion .study-hero h1 .hero-line:nth-child(1) > .line-inner { animation-delay: 1.1s; }
.js-motion .study-hero h1 .hero-line:nth-child(2) > .line-inner { animation-delay: 1.22s; }
.js-motion .study-hero-lead { animation-delay: 1.45s; }
.js-motion .study-hero-actions { animation-delay: 1.58s; }

/* the orange underline sweeping under 留学 */
.study-hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.08em;
  background: currentColor; opacity: 0.55; transform-origin: 0 50%;
}
.js-motion .study-hero h1 em::after { animation: line-draw 1.1s var(--ease-lux) 2s both; }

@keyframes lux-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lux-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes line-up  { from { transform: translateY(105%); } to { transform: none; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* grade axis: ticks rise one by one, the line draws, the "6" pulses */
.js-motion .grade-axis .tk { animation: lux-rise 0.9s var(--ease-lux) both; animation-delay: calc(1.7s + var(--i, 0) * 0.045s); }
.js-motion .grade-axis-line { transform-origin: 0 50%; animation: line-draw 1.6s var(--ease-soft) 1.75s both; }
.js-motion .grade-axis-labels { animation: lux-fade 1s ease 2.4s both; }
.js-motion .grade-axis-note { animation: lux-fade 1s ease 2.6s both; }
.grade-axis-note span { position: relative; }
.grade-axis-note span::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--orange); animation: dot-ping 2.4s ease-out 3s infinite;
}
.tk-mark i { transform-origin: 50% 100%; }
.js-motion .tk-mark i { animation: tick-grow 1s var(--ease-lux) 2.5s both; }
@keyframes dot-ping { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(4.2); opacity: 0; } }
@keyframes tick-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Generic reveal, richer easing ---------- */
.js-motion .page-study .reveal {
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity 1.1s ease, transform 1.3s var(--ease-lux), filter 1.1s ease;
  transition-delay: var(--d, 0s);
}
.js-motion .page-study .reveal.visible { transform: none; filter: none; }

/* section heads: kicker line draws, then the title rises out of a mask */
.js-motion .section-head .kicker i { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-lux) 0.25s; }
.js-motion .section-head.visible .kicker i { transform: scaleX(1); }
.js-motion .section-head h2 {
  clip-path: inset(0 0 100% 0); transform: translateY(0.5em);
  transition: clip-path 1.3s var(--ease-lux) 0.15s, transform 1.3s var(--ease-lux) 0.15s;
}
.js-motion .section-head.visible h2 { clip-path: inset(-0.2em -0.2em -0.3em -0.2em); transform: none; }
.js-motion .section-head .section-lead { opacity: 0; transform: translateY(14px); transition: opacity 1s ease 0.45s, transform 1.2s var(--ease-lux) 0.45s; }
.js-motion .section-head.visible .section-lead { opacity: 1; transform: none; }

/* ---------- Programs: curtain-wipe images + inner parallax ---------- */
.js-motion .prog.reveal { filter: none; transform: none; opacity: 1; }
.js-motion .prog .prog-media { transition: clip-path 1.6s var(--ease-soft); }
.js-motion .prog-right .prog-media { clip-path: inset(0 0 0 100%); }
.js-motion .prog-left .prog-media  { clip-path: inset(0 100% 0 0); }
.js-motion .prog.visible .prog-media { clip-path: inset(0 0 0 0); }
.prog-media img, .school-banner img, .age-media img {
  translate: 0 var(--py, 0);
  transition: transform 0.9s var(--ease-lux), scale 2s var(--ease-lux);
  will-change: translate;
}
.prog-media img { scale: 1.14; }
.js-motion .prog .prog-media img { scale: 1.34; }
.js-motion .prog.visible .prog-media img { scale: 1.14; }

.js-motion .prog .prog-body > * { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1.2s var(--ease-lux); }
.js-motion .prog.visible .prog-body > * { opacity: 1; transform: none; }
.js-motion .prog.visible .prog-body > :nth-child(1) { transition-delay: 0.45s; }
.js-motion .prog.visible .prog-body > :nth-child(2) { transition-delay: 0.55s; }
.js-motion .prog.visible .prog-body > :nth-child(3) { transition-delay: 0.65s; }
.js-motion .prog.visible .prog-body > :nth-child(4) { transition-delay: 0.75s; }
.js-motion .prog.visible .prog-body > :nth-child(5) { transition-delay: 0.85s; }

.prog-no .num { display: inline-block; transition: color 0.4s ease, transform 0.6s var(--ease-lux); }
.prog:hover .prog-no .num { transform: translateY(-4px); }
.prog-meta > div { position: relative; }

/* ---------- Ages: rising unveil + gentle 3D tilt ---------- */
.age-media { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-lux), box-shadow 0.6s ease, clip-path 1.5s var(--ease-soft); }
.age:hover .age-media { box-shadow: 0 30px 60px rgba(36, 38, 36, 0.16); }
.age-media img { scale: 1.08; }
.js-motion .age.reveal .age-media { clip-path: inset(100% 0 0 0 round 20px); }
.js-motion .age.reveal .age-media img { scale: 1.3; }
.js-motion .age.visible .age-media { clip-path: inset(0 0 0 0 round 20px); }
.js-motion .age.visible .age-media img { scale: 1.08; }
.age-head { position: relative; }
.age-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-lux);
}
.age:hover .age-head::after { transform: scaleX(1); }

/* ---------- School ---------- */
.school-banner { position: relative; }
.school-banner img { scale: 1.2; }
.js-motion .school-banner.reveal { filter: none; transform: none; clip-path: inset(14% 26% 14% 26% round 24px); transition: clip-path 1.8s var(--ease-soft), opacity 0.8s ease; }
.js-motion .school-banner.reveal img { scale: 1.45; }
.js-motion .school-banner.visible { clip-path: inset(0 0 0 0 round 24px); }
.js-motion .school-banner.visible img { scale: 1.2; }

.school-figures dt { font-variant-numeric: tabular-nums; }
.js-motion .school-figures > div { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 1.1s var(--ease-lux); transition-delay: calc(var(--i, 0) * 0.09s); }
.js-motion .school-figures.visible > div { opacity: 1; transform: none; }

.js-motion .sbar .track i { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s var(--ease-lux); }
.js-motion .school-result.visible .sbar .track i { transform: scaleX(1); }
.js-motion .school-result.visible .sbar:nth-child(2) .track i { transition-delay: 0.15s; }
.js-motion .school-result.visible .sbar:nth-child(3) .track i { transition-delay: 0.3s; }
.sbar .track i { position: relative; overflow: hidden; }
.sbar .track i::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%);
}
.school-result.visible .sbar .track i::after { animation: bar-shine 1.6s ease 1.6s; }
.js-motion .sbar .track u { opacity: 0; transition: opacity 0.8s ease 1.5s; }
.js-motion .school-result.visible .sbar .track u { opacity: 0.45; }
@keyframes bar-shine { to { transform: translateX(260%); } }

.js-motion .school-features article { border-top-color: transparent; position: relative; }
.school-features article::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--line); transform-origin: 0 50%;
}
.school-features article.is-lead::before { background: var(--orange); }
.js-motion .school-features article::before { transform: scaleX(0); transition: transform 1.2s var(--ease-lux); transition-delay: calc(0.1s + var(--i, 0) * 0.12s); }
.js-motion .school-features.visible article::before { transform: scaleX(1); }
.school-features article { transition: transform 0.5s var(--ease-lux); }
.school-features article:hover { transform: translateY(-4px); }

/* ---------- Housing rows ---------- */
.js-motion .housing-table .ht-row { opacity: 0; transform: translateX(-24px); transition: opacity 0.9s ease, transform 1.1s var(--ease-lux), background 0.4s ease; transition-delay: calc(0.2s + var(--i, 0) * 0.1s); }
.js-motion .housing-table.visible .ht-row { opacity: 1; transform: none; }
.ht-row:not(.is-accent) { position: relative; }
.ht-row:not(.is-accent)::before {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-lux);
}
.ht-row:hover::before { transform: scaleX(1); }
.ht-name { transition: color 0.4s ease, letter-spacing 0.6s var(--ease-lux); }
.ht-row:hover .ht-name { color: var(--orange-dark); }

.js-motion .watch li { opacity: 0; transform: translateY(12px); transition: opacity 0.8s ease, transform 1s var(--ease-lux); transition-delay: calc(0.2s + var(--i, 0) * 0.08s); }
.js-motion .visible .watch li { opacity: 1; transform: none; }

/* ---------- Flow: the timeline draws itself ---------- */
.flow-steps li { position: relative; }
.flow-steps li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%;
}
.flow-steps li::after {
  content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); transform: scale(0);
}
.flow-steps li + li::after { left: 30px; }
.js-motion .flow-steps li.visible::before { transform: scaleX(1); transition: transform 1.2s var(--ease-soft); transition-delay: calc(0.1s + var(--i, 0) * 0.18s); }
.js-motion .flow-steps li.visible::after { transform: scale(1); transition: transform 0.6s var(--ease-lux); transition-delay: calc(var(--i, 0) * 0.18s); }
.js-motion .flow-steps li.reveal { transition-delay: calc(var(--i, 0) * 0.14s); }
.fn { transition: transform 0.6s var(--ease-lux), color 0.4s ease; }
.flow-steps li:hover .fn { transform: translateY(-5px); color: var(--orange-dark); }

/* ---------- Support ---------- */
.sp { position: relative; transition: padding 0.5s var(--ease-lux); }
.sp::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-lux);
}
.sp:hover::before { transform: scaleX(1); }
.sp h3 { transition: transform 0.5s var(--ease-lux), color 0.3s ease; }
.sp:hover h3 { transform: translateX(6px); color: var(--orange-dark); }
.sp > span { transition: color 0.3s ease; }
.sp:hover > span { color: var(--orange-dark); }

/* ---------- FAQ ---------- */
.faq-item summary::after { transition: color 0.25s ease, transform 0.5s var(--ease-lux); }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-body { overflow: hidden; }

/* ---------- Contact ---------- */
.page-study .contact-orb { animation: orb-drift 14s ease-in-out infinite alternate; }
.page-study .contact::before { animation: orb-spin 26s linear infinite; }
@keyframes orb-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.12); } }
@keyframes orb-spin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.06); } to { transform: rotate(360deg) scale(1); } }
.js-motion .contact-copy h2 .title-line { overflow: hidden; }
.js-motion .contact-copy h2 .title-line > .line-inner { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease-lux); }
.js-motion .contact-copy.visible h2 .title-line > .line-inner { transform: none; }
.js-motion .contact-copy.visible h2 .title-line:nth-child(2) > .line-inner { transition-delay: 0.12s; }

/* ---------- Buttons: shine sweep + magnetic pull ---------- */
.page-study .button { position: relative; overflow: hidden; isolation: isolate; translate: var(--mx, 0) var(--my, 0); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, translate 0.5s var(--ease-lux); }
.page-study .button::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); transition: left 0.9s var(--ease-lux);
}
.page-study .button:hover::after { left: 130%; }

/* ---------- Tablet / phone adjustments ---------- */
@media (max-width: 1100px) {
  .js-motion .prog-right .prog-media, .js-motion .prog-left .prog-media { clip-path: inset(100% 0 0 0); }
  .js-motion .prog.visible .prog-media { clip-path: inset(0 0 0 0); }
  .js-motion .school-banner.reveal { clip-path: inset(10% 10% 10% 10% round 20px); }
  .js-motion .school-banner.visible { clip-path: inset(0 0 0 0 round 20px); }
  .flow-steps li + li::after { left: 0; }
}
@media (max-width: 760px) {
  .js-motion .page-study .reveal { filter: none; transform: translateY(24px); }
  .hero-glow { display: none; }
}
@media (hover: none) {
  .hero-glow { display: none; }
  .page-study .button::after { display: none; }
  .age-media { transform: none; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .scroll-progress { display: none !important; }
  .page-study *, .page-study *::before, .page-study *::after { animation: none !important; }
}