@charset "utf-8";

/* =========================================================
   Veast — TALENT 詳細ページ
   style.css のトークン・ベース・ボタン・フッターを継承
   body の style 属性で --tc（パーソナルカラー）を渡す
   ========================================================= */

.tl{background:var(--deep);color:#fff;--tc:#8A6BE0;--tc-soft:#CDBDF5;}

/* ---------- hero ---------- */
.tl-hero{position:relative;overflow:hidden;background:var(--deep);}
.tl-hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 60% at 74% 62%,rgba(138,107,224,.42) 0%,rgba(138,107,224,0) 70%),
    radial-gradient(40% 46% at 12% 12%,rgba(100,73,168,.28) 0%,rgba(100,73,168,0) 70%);
}
.tl-hero__float{width:min(40vw,360px);left:-110px;bottom:-110px;transform:rotate(-12deg);color:#fff;}
.tl-hero__inner{
  position:relative;z-index:2;max-width:1060px;margin:0 auto;
  padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(22px,3.4vw,40px)) var(--pad) clamp(56px,7vw,84px);
}
.tl-crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--on-deep-dim);
  margin-bottom:clamp(28px,4vw,48px);
}
.tl-crumb a:hover{color:#fff;}
.tl-crumb em{font-style:normal;font-family:var(--ff-jp);letter-spacing:.06em;color:var(--accent-soft);}

.tl-hero__grid{display:grid;grid-template-columns:1fr minmax(320px,480px);gap:clamp(30px,5vw,64px);align-items:center;}

.tl-hero__eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;opacity:0;}
.tl-hero.is-ready .tl-hero__eyebrow{animation:tlFade .8s var(--ease) .1s forwards;}
.tl-hero__no{
  font-family:var(--ff-en);font-weight:800;font-size:11px;letter-spacing:.2em;
  background:var(--tc);color:#fff;padding:5px 14px;border-radius:999px;
}
.tl-hero__debut{font-family:var(--ff-en);font-weight:700;font-size:12px;letter-spacing:.22em;color:var(--accent-soft);}

.tl-hero__name{line-height:1.1;}
.tl-hero__name .ln{display:block;overflow:hidden;padding-bottom:.08em;}
.tl-hero__name .ln > span{display:block;transform:translateY(110%);}
.tl-hero.is-ready .tl-hero__name .ln > span{animation:tlLine 1.05s cubic-bezier(.16,1,.3,1) forwards;}
.tl-hero__ja{display:block;font-size:clamp(38px,6.6vw,68px);font-weight:900;letter-spacing:.04em;}
.tl-hero__ja .ln > span{animation-delay:.2s;}
.tl-hero__ja ruby{ruby-position:over;}
.tl-hero__ja rt{font-size:.28em;font-weight:700;letter-spacing:.22em;color:var(--accent-soft);}
.tl-hero__en{display:block;font-family:var(--ff-en);font-weight:800;font-size:clamp(17px,2.2vw,24px);letter-spacing:.1em;color:var(--accent-soft);margin-top:4px;}
.tl-hero__en .ln > span{animation-delay:.36s;}

.tl-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;opacity:0;}
.tl-hero.is-ready .tl-hero__tags{animation:tlUp .8s var(--ease) .6s forwards;}
.tl-hero__tags li{
  font-size:12.5px;font-weight:700;padding:6px 15px;border-radius:999px;
  border:1px solid var(--line-dark);background:rgba(255,255,255,.05);
}
.tl-hero__tags li.is-tc{border-color:var(--tc);color:var(--tc-soft);background:color-mix(in srgb,var(--tc) 18%,transparent);}

.tl-hero__catch{
  position:relative;margin-top:26px;
  font-size:clamp(16px,2vw,21px);font-weight:900;line-height:1.9;
  padding:18px clamp(20px,2.6vw,28px);border-radius:var(--squircle-sm);
  background:#fff;color:var(--ink);
  opacity:0;
}
.tl-hero.is-ready .tl-hero__catch{animation:tlPop .7s cubic-bezier(.34,1.56,.64,1) .8s forwards;}
.tl-hero__catch::before{
  content:"";position:absolute;left:34px;top:-11px;width:22px;height:22px;
  background:#fff;border-radius:4px 4px 4px 12px;transform:rotate(45deg);
}
.tl-hero__sns{display:flex;gap:12px;margin-top:26px;opacity:0;}
.tl-hero.is-ready .tl-hero__sns{animation:tlUp .8s var(--ease) 1s forwards;}
.tl-hero__sns a{
  width:44px;height:44px;border-radius:14px 14px 22px 14px;
  border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.tl-hero__sns a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px);}
.tl-hero__sns svg{width:17px;height:auto;fill:currentColor;}

/* visual */
.tl-hero__visual{position:relative;opacity:0;}
.tl-hero.is-ready .tl-hero__visual{animation:tlVisual 1.3s cubic-bezier(.16,1,.3,1) .15s forwards;}
.tl-stage{
  position:relative;aspect-ratio:1/1;border-radius:var(--squircle);overflow:hidden;
  border:1px solid var(--line-dark);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.tl-stage__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 50% 100%,color-mix(in srgb,var(--tc) 55%,transparent) 0%,transparent 70%),
    linear-gradient(160deg,#3A2F6E 0%,var(--deep) 60%,var(--deep-2) 100%);
}
.tl-stage__bg::after{
  content:"";position:absolute;inset:0;opacity:.12;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 70%);
          mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 70%);
}
.tl-stage__form{
  position:absolute;inset:0;margin:0;display:grid;place-items:end center;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  pointer-events:none;
}
.tl-stage__form.is-active{opacity:1;transform:none;pointer-events:auto;}
.tl-stage__form img{width:100%;height:auto;display:block;}
/* パーソナルカラーの光が、呼吸するようにゆっくり明滅する */
.tl-stage__bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 92%,color-mix(in srgb,var(--tc) 60%,transparent) 0%,transparent 70%);
  animation:tlBreath 4.8s ease-in-out infinite;
}
@keyframes tlBreath{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.9;transform:scale(1.06);}}
/* マウス操作の端末では、カーソルに合わせて傾き、立ち絵が少し逆へずれて奥行きが出る */
.tl-stage.is-tilt{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease);
}
.tl-stage.is-tilt:hover{transition:transform .12s linear;}
.tl-stage.is-tilt .tl-stage__form img{
  transform:translate(calc(var(--px,0) * -12px),calc(var(--py,0) * -8px)) scale(1.03);
  transition:transform .6s var(--ease);
}
.tl-stage.is-tilt:hover .tl-stage__form img{transition:transform .15s linear;}
.tl-stage.is-tilt::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.22),rgba(255,255,255,0) 50%);
}
.tl-stage.is-tilt:hover::after{opacity:1;}
.tl-stage__form--soon{place-items:center;text-align:center;padding:24px;}
.tl-stage__form--soon .face{width:34%;opacity:.9;margin-bottom:22px;}
.tl-stage__form--soon figcaption{font-size:13px;font-weight:700;line-height:1.9;color:var(--on-deep);}
.tl-stage__form--soon figcaption span{
  display:block;font-family:var(--ff-en);font-weight:800;letter-spacing:.24em;font-size:13px;color:var(--accent-soft);margin-bottom:6px;
}

.tl-forms{display:flex;gap:10px;justify-content:center;margin-top:16px;}
.tl-forms__btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;
  padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--line-dark);background:rgba(255,255,255,.04);color:var(--on-deep-dim);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.tl-forms__btn:hover{border-color:var(--accent-soft);color:#fff;}
.tl-forms__btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(138,107,224,.4);}
.tl-forms__en{font-family:var(--ff-en);font-weight:800;font-size:12px;letter-spacing:.2em;line-height:1.3;}
.tl-forms__ja{font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.3;}

@keyframes tlFade{to{opacity:1;}}
@keyframes tlLine{to{transform:translateY(0);}}
@keyframes tlUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes tlPop{from{opacity:0;transform:translateY(12px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes tlVisual{from{opacity:0;transform:translateY(36px);}to{opacity:1;transform:none;}}

/* ---------- profile ---------- */
.tl-profile{color:var(--ink);}
.tl-profile__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,56px);align-items:start;}
.tl-bio__catch{font-size:clamp(21px,2.8vw,30px);font-weight:900;line-height:1.7;margin-bottom:22px;letter-spacing:.02em;}
.tl-bio p + p{margin-top:1.2em;}
.tl-bio p:not(.tl-bio__catch){font-size:14.5px;line-height:2.15;}

.tl-data{
  background:#fff;border:1px solid var(--line);border-radius:var(--squircle);
  padding:clamp(22px,2.8vw,32px) clamp(22px,3vw,34px);
}
.tl-data__list div{
  display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.tl-data__list div:first-child{padding-top:0;}
.tl-data__list dt{
  position:relative;padding-left:14px;font-size:12.5px;font-weight:900;color:var(--accent-deep);
}
.tl-data__list dt::before{
  content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;
  border-radius:2px 2px 4px 2px;background:var(--tc);transform:rotate(45deg);
}
.tl-data__list dd{margin:0;font-size:14px;font-weight:700;line-height:1.9;}
.tl-data__list dd a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;}
.tl-data__list dd a:hover{opacity:.7;}
.tl-tags__hint{margin-top:20px;font-size:11.5px;font-weight:700;color:var(--muted);}
.tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.tl-tag{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  background:var(--mist);border:1.5px solid transparent;border-radius:999px;padding:6px 12px 6px 14px;font-size:12.5px;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.tl-tag:hover{border-color:var(--accent-soft);background:#fff;transform:translateY(-2px);}
.tl-tag:active{transform:scale(.96);}
.tl-tag span{font-weight:700;color:var(--muted);font-size:11px;}
.tl-tag b{font-weight:900;color:var(--ink);}
.tl-tag i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--accent-deep);transition:background .3s var(--ease),color .3s var(--ease);}
.tl-tag i svg{width:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.tl-tag.is-copied{border-color:var(--accent);background:#fff;}
.tl-tag.is-copied i{background:var(--accent);color:#fff;}
/* ---------- movie ---------- */
.tl-movie{color:#fff;}
.tl-movie__float{width:min(36vw,320px);right:-90px;top:-80px;transform:rotate(14deg);color:#fff;}
.tl-movies{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.8vw,32px);}
.tl-movie-card__thumb{
  position:relative;aspect-ratio:16/9;border-radius:var(--squircle-sm);overflow:hidden;
  background:var(--deep-2);border:1px solid var(--line-dark);
  display:grid;place-items:center;
}
.tl-movie-card__thumb img,.tl-movie-card__thumb iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;}
.tl-movie-card__play{
  position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(to top,rgba(20,15,40,.55),rgba(20,15,40,0) 60%);
}
.tl-movie-card__play span{
  width:66px;height:66px;border-radius:20px 20px 34px 20px;transform:rotate(45deg);
  background:var(--accent);display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(138,107,224,.5);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.tl-movie-card__play:hover span{transform:rotate(45deg) scale(1.08);background:var(--accent-deep);}
.tl-movie-card__thumb img{transition:transform .6s var(--ease);}
.tl-movie-card:hover .tl-movie-card__thumb img{transform:scale(1.04);}
.tl-movie-card__play svg{width:22px;transform:rotate(-45deg) translateX(2px);fill:#fff;}
.tl-movie-card__soon{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-en);font-weight:800;letter-spacing:.24em;font-size:13px;color:var(--accent-soft);
}
.tl-movie-card__soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:soonPulse 1.8s ease-in-out infinite;}
.tl-movie-card__ttl{margin-top:14px;font-size:14px;font-weight:700;line-height:1.8;color:var(--on-deep);}
.tl-movie-card--link{display:block;}
.tl-movie-card--link .tl-movie-card__thumb{background:rgba(255,255,255,.04);transition:background .3s var(--ease),border-color .3s var(--ease);}
.tl-movie-card--link:hover .tl-movie-card__thumb{background:rgba(138,107,224,.16);border-color:var(--accent);}
.tl-movie-card__more{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-en);font-weight:800;letter-spacing:.2em;font-size:13px;color:var(--accent-soft);
}
.tl-movie-card__more svg{width:22px;fill:currentColor;}
.tl-movie-card.is-soon .tl-movie-card__ttl{color:var(--on-deep-dim);}

/* ---------- back ---------- */
.tl-back{background:var(--paper);color:var(--ink);padding-top:clamp(56px,7vw,84px);padding-bottom:clamp(56px,7vw,84px);}
.tl-back__box{text-align:center;}
.tl-back__catch{font-size:clamp(19px,2.6vw,26px);font-weight:900;line-height:1.8;}
.tl-back .btn-wrap{margin-top:clamp(22px,3vw,30px);}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .tl-hero__grid{grid-template-columns:1fr minmax(300px,420px);}
}
@media (max-width:860px){
  .tl-hero__grid{grid-template-columns:1fr;gap:34px;}
  .tl-hero__visual{order:-1;max-width:520px;margin:0 auto;width:100%;}
  .tl-hero__text{text-align:center;}
  .tl-hero__eyebrow,.tl-hero__tags,.tl-hero__sns{justify-content:center;}
  .tl-hero__catch::before{left:50%;margin-left:-11px;}
  .tl-hero__float{display:none;}
  .tl-profile__grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .tl-crumb{padding-right:84px;} /* 右上の「ひみつ」の札と重ならないように */
  .tl-movies{grid-template-columns:1fr;}
  .tl-data__list div{grid-template-columns:92px 1fr;gap:10px;}
  .tl-forms__btn{min-width:0;flex:1;}
  .tl-hero__catch{font-size:15.5px;padding:16px 18px;}
}

/* JS が使えない場合は演出を挟まず完成形を表示 */
html.no-js .tl-hero__eyebrow,
html.no-js .tl-hero__tags,
html.no-js .tl-hero__catch,
html.no-js .tl-hero__sns,
html.no-js .tl-hero__visual{opacity:1;transform:none;}
html.no-js .tl-hero__name .ln > span{transform:none;}
html.no-js .tl-forms{display:none;}

@media (prefers-reduced-motion:reduce){
  .tl-stage__bg::before{animation:none;opacity:.6;}
  .tl-hero__eyebrow,.tl-hero__tags,.tl-hero__catch,.tl-hero__sns,.tl-hero__visual{opacity:1;transform:none;animation:none;}
  .tl-hero__name .ln > span{transform:none;animation:none;}
}