/* =====================================================================
   rgrow-v3 : 全部乗せアニメーション層（_redesign の上に重ねる）
   gsap/ScrollTrigger 前提（サイトが読み込み済み）。バニラfallbackあり。
   ===================================================================== */
:root{ --v3-accent:#FF4800; --v3-ink:#191819; --v3-ease:cubic-bezier(.16,1,.3,1); }

/* 1. スクロール進捗バー */
.v3-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--v3-accent),#ff9a5c);z-index:9999;pointer-events:none;
}

/* 2. ブレンドカーソル */
.v3-cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid var(--v3-accent);border-radius:50%;
  pointer-events:none;z-index:9998;mix-blend-mode:difference;opacity:0;
  transition:width .3s var(--v3-ease),height .3s var(--v3-ease),background-color .3s,opacity .35s;
  will-change:transform;
}
.v3-cursor.is-on{opacity:1;}
.v3-cursor.is-hot{width:58px;height:58px;background:var(--v3-accent);border-color:var(--v3-accent);}
@media (hover:none){ .v3-cursor{display:none;} }

/* 3. 流れるマーキー */
.v3-marquee{overflow:hidden;border-block:1px solid rgba(25,24,25,.12);padding:16px 0;background:#fff;}
.v3-marquee__track{display:inline-flex;white-space:nowrap;will-change:transform;}
.v3-marquee__track span{
  font-family:'Lato',sans-serif;font-weight:800;font-size:clamp(22px,4vw,46px);
  letter-spacing:.03em;text-transform:uppercase;color:var(--v3-ink);
  padding:0 14px;display:inline-flex;align-items:center;gap:28px;
}
.v3-marquee__track span::after{content:"\2733";color:var(--v3-accent);font-size:.5em;}
.v3-marquee--accent{background:var(--v3-ink);}
.v3-marquee--accent .v3-marquee__track span{color:#fff;}

/* 3-2. 3Dリボン化（帯を奥行きのある斜め帯として交差させる） */
.v3-ribbons{position:relative;overflow:hidden;padding:clamp(60px,9vw,120px) 0;}
.v3-ribbons .v3-marquee{width:124vw;margin-left:-12vw;position:relative;z-index:3;
  border-top:3px solid var(--v3-accent);
  box-shadow:0 22px 48px -20px rgba(25,24,25,.38);}
.v3-ribbons .v3-marquee--back{position:absolute;top:50%;left:0;z-index:1;margin-top:-34px;
  border-top:none;box-shadow:none;opacity:.5;background:#fff;border-color:rgba(25,24,25,.08);}
.v3-ribbons .v3-marquee--back .v3-marquee__track span{color:rgba(25,24,25,.35);-webkit-text-stroke:0;}

/* 縁取り文字の交互リズム（solid ✳ outline ✳ solid …） */
.v3-marquee__track span:nth-child(even){color:transparent;-webkit-text-stroke:1.3px var(--v3-ink);}
.v3-marquee--accent .v3-marquee__track span:nth-child(even){color:transparent;-webkit-text-stroke:1.3px #fff;}
.v3-marquee--back .v3-marquee__track span:nth-child(even){color:rgba(25,24,25,.18);-webkit-text-stroke:0;}

/* オレンジの細帯（3層目・最前面と奥帯の間を逆方向に走る） */
.v3-marquee--stripe{position:absolute;top:50%;left:0;width:130vw;margin-left:-15vw;z-index:2;
  margin-top:-15px;padding:9px 0;background:var(--v3-accent);border:none;
  box-shadow:0 12px 30px -12px rgba(255,72,0,.5);overflow:hidden;}
.v3-marquee--stripe .v3-marquee__track span{
  font-size:12px;letter-spacing:.32em;color:#fff!important;-webkit-text-stroke:0!important;
  padding:0 12px;gap:20px;font-weight:700;text-transform:uppercase;}
.v3-marquee--stripe .v3-marquee__track span::after{color:#fff;font-size:.6em;}
@media (prefers-reduced-motion:reduce){ .v3-ribbons{display:none!important;} }

/* 4. ヒーロー背景オーロラ＋光沢スイープ */
.p-fv{position:relative;overflow:hidden;}
.p-fv > *{position:relative;z-index:1;}
.v3-aurora{position:absolute;inset:-25% -12% auto -12%;height:135%;z-index:0;pointer-events:none;filter:blur(64px);opacity:.55;}
.v3-aurora::before,.v3-aurora::after{content:"";position:absolute;border-radius:50%;}
.v3-aurora::before{width:46vw;height:46vw;left:6%;top:2%;
  background:radial-gradient(circle,rgba(255,72,0,.34),transparent 65%);animation:v3-drift1 17s ease-in-out infinite;}
.v3-aurora::after{width:42vw;height:42vw;right:4%;top:16%;
  background:radial-gradient(circle,rgba(120,150,255,.26),transparent 65%);animation:v3-drift2 21s ease-in-out infinite;}
@keyframes v3-drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(7%,9%)}}
@keyframes v3-drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-8%,6%)}}
.p-fv__img{position:relative;}
.p-fv__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.6) 48%,transparent 64%);
  transform:translateX(-130%);
}
html.rd-hero-in .p-fv__img::after{animation:v3-sheen 6s ease-in-out 1.8s infinite;}
@keyframes v3-sheen{0%{transform:translateX(-130%)}24%,100%{transform:translateX(130%)}}

/* 5. 文字割れリビール（大見出しコピー用） */
.v3-char{display:inline-block;opacity:0;will-change:transform,opacity;}
.v3-split.is-in .v3-char{opacity:1;transform:none;transition:opacity .7s var(--v3-ease),transform .7s var(--v3-ease);}

/* 6. 3Dチルト用パースペクティブ */
.p-top-service__list,.p-top-works__list{perspective:1200px;}

/* 8. TOP→About の3D遷移（scrub） */
.p-fv{perspective:1100px;perspective-origin:50% 30%;}
.p-fv__wrap{transform-style:preserve-3d;will-change:transform,opacity,filter;}
.p-top-about{perspective:1100px;}
.p-top-about__inner{transform-style:preserve-3d;will-change:transform,opacity;}
.p-top-service__card,.p-top-works__thumb{will-change:transform;}

/* 7. マグネティックボタン（transformはJS） */
.c-btn__link{will-change:transform;}

/* reduced-motion: 動きものを止める */
@media (prefers-reduced-motion:reduce){
  .v3-progress,.v3-cursor,.v3-marquee{display:none!important;}
  .v3-aurora,.p-fv__img::after{animation:none!important;}
  .v3-char{opacity:1!important;transform:none!important;}
}