/* ============================================================
   1. hero  (page y 0-900)
   rect は 1440px 幅時の絶対座標から section y0=0 を引いた値
   ============================================================ */

#hero {
  height: 900px;
}

/* --- 背景フレーム [8,8,1424,884]：写真3枚のクロスフェード ----- */
.hero__video {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 1424px;
  height: 884px;
  background-color: #eee;
  overflow: hidden;
  /* keep the slides' stacking local so the overlays (z=2) stay above */
  z-index: 1;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* 1s crossfade on a 5s cadence, driven by assets/js/hero.js */
  transition: opacity 1s var(--ease);
}

.hero__slide.is-active { opacity: 1; }

.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* --- ノッチ角（逆丸角）は .notch ユーティリティ（chrome.css）--- */

/* --- 右上 白パネル（サブナビ） [1274.11,8,157.891,322] -------
   C&Pの項目名は原本より長いため、右端(1432px)を保ったまま左へ拡幅 */
.hero__nav {
  position: absolute;
  top: 8px;
  left: 1217px;
  width: 215px;
  height: 291px;
  padding: 112px 37px 40px 39px;
  background-color: #fff;
  border-radius: 0 0 0 16px;
  z-index: 2;
}

.hero__navList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  list-style: none;
}

.hero__navLink {
  display: block;
  font-family: var(--font-jp);
  font-feature-settings: 'palt' 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  color: var(--navy);
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.hero__navLink:hover { opacity: 0.5; }

.hero__notch--navTop    { left: -16px; top: 0; }
.hero__notch--navBottom { left: 199px; top: 322px; }

/* --- 左下 見出し 白箱 --------------------------------------- */
.hero__copy {
  position: absolute;
  background-color: #fff;
  border-radius: 0 16px 0 0;
  z-index: 2;
}

/* 幅は文字数に追従させる（原本のSVG見出しと同じく箱が文字を包む）。
   min-width で原本のプロポーションを保つ */
.hero__copy--1 {
  top: 699px;
  left: 8px;
  min-width: 585px;
  height: 71px;
  padding: 14px 27px 14px 24px;
}

.hero__copy--2 {
  top: 770px;
  left: 8px;
  min-width: 924px;
  height: 122px;
  padding: 14px 22px 7px 17px;
}

.hero__copyLine {
  font-family: var(--font-jp);
  font-feature-settings: 'palt' 1;
  font-size: 38px;
  font-weight: 900;
  line-height: 43px;
  letter-spacing: 0.2px;
  color: var(--navy);
  white-space: nowrap;
}

/* 巨大ロゴタイプ: CAREER を6色、以降はネイビー */
.hero__copyTitle {
  font-family: var(--font-en);
  font-size: 72px;
  font-weight: 800;
  line-height: 101px;
  letter-spacing: -1.5px;
  color: var(--navy);
  white-space: nowrap;
}

.hero__copyTitle .c1  { color: var(--red); }
.hero__copyTitle .c2  { color: var(--orange); }
.hero__copyTitle .c3  { color: var(--green); }
.hero__copyTitle .c4  { color: var(--cyan); }
.hero__copyTitle .c5  { color: var(--blue); }
.hero__copyTitle .c6  { color: var(--magenta); }
.hero__copyTitle .amp { color: var(--pink); }
.hero__copyTitle .sp  { letter-spacing: 0; }

.hero__notch--copy1Top   { left: 0;      top: -16px; }
.hero__notch--copy1Right { right: -16px; top: 55px; }
.hero__notch--copy2Right { right: -16px; top: 106px; }

/* --- 右下 スライドインジケータ [1273,818,159.141,74] --------- */
.hero__indicator {
  position: absolute;
  top: 818px;
  left: 1273px;
  width: 159.141px;
  height: 74px;
  padding: 31px 24px 19px 33px;
  background-color: #fff;
  border-radius: 16px 0 0 0;
  z-index: 2;
}

.hero__indicatorInner {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 24px;
}

/* 現在のスライド番号（31px幅・右寄せ） */
.hero__slideNum {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 31px;
  height: 24px;
  overflow: hidden;
}

.hero__slideNum p {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  color: var(--navy);
}

/* プログレスバー: 5秒で0→100%に塗り潰す */
.hero__progress {
  margin: 0 9px 0 13px;
  width: 24px;
  height: 3px;
}

.hero__progressTrack {
  position: relative;
  width: 24px;
  height: 3px;
  background-color: rgba(38, 38, 56, 0.2);
  overflow: hidden;
}

.hero__progressTrack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--navy);
  animation: fillBackground 5s linear infinite;
}

@keyframes fillBackground {
  0%   { width: 0; }
  100% { width: 100%; }
}

.hero__slideTotal {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  color: rgba(38, 38, 56, 0.5);
}

.hero__notch--indTop  { left: 143.141px; top: -16px; }
.hero__notch--indLeft { left: -16px;     top: 58px; }

/* ============================================================
   Opening sequence — blob burst -> C&P logo bounce -> panel
   wipe -> confetti -> hero cascade  (orchestrated by hero.js)
   ============================================================ */

.opening {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #FDF6EE;
  overflow: hidden;
}

.opening.is-done { display: none; }

/* --- stage 1: color blobs pop in --------------------------- */
.opening__blob {
  position: absolute;
  display: block;
  border-radius: 47% 53% 46% 54% / 44% 47% 53% 56%;
  transform: scale(0);
}
.opening.s1 .opening__blob {
  animation: opBlobIn .7s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.opening__blob--1 { width: 34vw; height: 34vw; left: -8vw;  top: -10vh; background: var(--blue);    animation-delay: 0s !important; }
.opening__blob--2 { width: 26vw; height: 26vw; right: -6vw; top: -8vh;  background: var(--orange);  animation-delay: .07s !important; }
.opening__blob--3 { width: 22vw; height: 22vw; left: 8vw;   bottom: -8vh; background: var(--cyan);  animation-delay: .14s !important; }
.opening__blob--4 { width: 30vw; height: 30vw; right: -4vw; bottom: -12vh; background: var(--magenta); animation-delay: .21s !important; }
.opening__blob--5 { width: 16vw; height: 16vw; left: 30vw;  top: 6vh;  background: var(--green);   animation-delay: .28s !important; }
.opening__blob--6 { width: 14vw; height: 14vw; right: 26vw; top: 16vh; background: var(--red);     animation-delay: .35s !important; }
.opening__blob--7 { width: 12vw; height: 12vw; left: 44vw;  bottom: 4vh; background: var(--pink);  animation-delay: .42s !important; }

@keyframes opBlobIn {
  0%   { transform: scale(0) rotate(-30deg); }
  70%  { transform: scale(1.12) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* subtle idle wobble after landing */
.opening.s2 .opening__blob { animation: opBlobWobble 3s ease-in-out infinite alternate; }
@keyframes opBlobWobble {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.05) translateY(-1.2vh); }
}

/* --- stage 2: C&P letters bounce in ------------------------ */
.opening__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(12rem, 24vw, 26rem);
  line-height: 1;
  display: flex;
  z-index: 3;
}

.opening__ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(60vh) rotate(20deg);
  text-shadow: 0 10px 40px rgba(40, 40, 64, .18);
}
.opening.s2 .opening__ch { animation: opChIn .65s cubic-bezier(.34, 1.66, .64, 1) forwards; }
.opening__ch--c   { color: var(--blue);  animation-delay: 0s   !important; }
.opening__ch--amp { color: var(--red);   animation-delay: .12s !important; }
.opening__ch--p   { color: var(--navy);  animation-delay: .24s !important; }

@keyframes opChIn {
  0%   { opacity: 0; transform: translateY(60vh) rotate(20deg); }
  60%  { opacity: 1; transform: translateY(-4vh) rotate(-6deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

.opening__sub {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translateX(-50%) translateY(2rem);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: .5em;
  color: var(--navy);
  opacity: 0;
  z-index: 3;
  white-space: nowrap;
}
.opening.s2 .opening__sub { animation: opSubIn .5s .5s ease-out forwards; }
@keyframes opSubIn { to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* --- stage 3: navy panels wipe upward ---------------------- */
.opening__panels {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  pointer-events: none;
}
.opening__panel {
  flex: 1;
  background: var(--navy);
  transform: translateY(101%);
}
.opening.s3 .opening__panel { animation: opPanelUp .9s cubic-bezier(.7, 0, .2, 1) forwards; }
.opening.s3 .opening__panel:nth-child(1) { animation-delay: 0s; }
.opening.s3 .opening__panel:nth-child(2) { animation-delay: .06s; }
.opening.s3 .opening__panel:nth-child(3) { animation-delay: .12s; }
.opening.s3 .opening__panel:nth-child(4) { animation-delay: .18s; }
.opening.s3 .opening__panel:nth-child(5) { animation-delay: .24s; }

@keyframes opPanelUp {
  0%   { transform: translateY(101%); }
  45%  { transform: translateY(0); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}

/* stage 3 hides logo/blobs behind the wipe */
.opening.s3 .opening__blobs,
.opening.s3 .opening__logo,
.opening.s3 .opening__sub { animation: opFadeOut .3s .3s forwards; }
@keyframes opFadeOut { to { opacity: 0; } }

/* stage 4: overlay background becomes transparent so the wipe reveals the hero */
.opening.s3 { background: transparent; transition: background .1s .6s; }

/* --- confetti ---------------------------------------------- */
.opening__confetti { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.opening__confetti i {
  position: absolute;
  top: -4vh;
  display: block;
  width: 10px;
  height: 14px;
  opacity: .95;
  animation: opConfetti linear forwards;
}
@keyframes opConfetti {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(var(--spin, 540deg)); opacity: .7; }
}

/* --- hero cascade after reveal ----------------------------- */
body.op-wait .hero__copy--1,
body.op-wait .hero__copy--2,
body.op-wait .hero__indicator,
body.op-wait .hero__nav {
  opacity: 0;
  transform: translateY(5rem);
}
body.op-in .hero__copy--1,
body.op-in .hero__copy--2,
body.op-in .hero__indicator,
body.op-in .hero__nav {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s var(--ease), transform .6s cubic-bezier(.34, 1.46, .64, 1);
}
body.op-in .hero__copy--1   { transition-delay: .1s; }
body.op-in .hero__copy--2   { transition-delay: .22s; }
body.op-in .hero__indicator { transition-delay: .38s; }
body.op-in .hero__nav       { transition-delay: .5s; }

/* per-letter pop of CAREER & PARTNERS */
body.op-wait .hero__copyTitle span { opacity: 0; transform: translateY(2.4rem) scale(.6); }
body.op-in .hero__copyTitle span {
  opacity: 1;
  transform: none;
  transition: opacity .35s ease-out, transform .45s cubic-bezier(.34, 1.66, .64, 1);
}

/* ken burns on the active slide */
.hero__slide.is-active img { animation: heroZoom 7s ease-out forwards; }
@keyframes heroZoom { 0% { transform: scale(1); } 100% { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  .opening { display: none; }
  body.op-wait .hero__copy--1, body.op-wait .hero__copy--2,
  body.op-wait .hero__indicator, body.op-wait .hero__nav,
  body.op-wait .hero__copyTitle span { opacity: 1; transform: none; }
  .hero__slide.is-active img { animation: none; }
}

/* --- slide transition: 3-color diagonal stripe wipe -------- */
.hero__wipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.hero__wipe i {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 36%;
  transform: translateX(-320%) skewX(-14deg);
}
.hero__wipe i:nth-child(1) { background: var(--blue); }
.hero__wipe i:nth-child(2) { background: var(--magenta); }
.hero__wipe i:nth-child(3) { background: var(--orange); }
.hero__wipe.run i { animation: heroWipe .8s cubic-bezier(.65, .05, .25, 1) forwards; }
.hero__wipe.run i:nth-child(2) { animation-delay: .06s; }
.hero__wipe.run i:nth-child(3) { animation-delay: .12s; }

@keyframes heroWipe {
  0%   { transform: translateX(-320%) skewX(-14deg); }
  100% { transform: translateX(460%) skewX(-14deg); }
}

/* wipe covers the swap, so the fade itself can be instant */
.hero__slide { transition: none; }