/* ===== AUROCHS HERO STYLES ===== */

/* --- FOUC guard（enqueueでheadに入るため確実に先行適用） --- */
  #aurochsHero{ opacity:0; background:#160b04; min-height:100svh; min-height:100dvh;
    animation:ah-failsafe 0s linear 1.2s forwards; }  /* JS無効でも1.2sで強制表示 */
  #aurochsHero.ah-ready{ animation:none !important; opacity:1 !important; transition:opacity .35s ease; }
  @keyframes ah-failsafe{ to{ opacity:1; } }

/* --- base --- */
  .aurochs-hero{
    --red:#e60012; --green:#90c221; --yellow:#fff102;
    --ink:#0b0a0a; --paper:#f3efe2;
    --bg0:#070707; --bg1:#1a0608; --bg2:#241006;
    /* --- skinnable theme tokens (v1 defaults) --- */
    --accent-rgb:230,0,18;          /* 背景の差し色＆牛の後光 */
    --glow-a:.18;                   /* 背景差し色の濃さ */
    --dot:rgba(255,255,255,.10);    /* ハーフトーン */
    --line-amb:rgba(255,200,90,.16);    /* 集中線（常時）＝オレンジ黄系 */
    --line-burst:rgba(255,230,140,.85); /* 集中線（炸裂）＝明るい黄 */
    --vig:rgba(0,0,0,.72);          /* ビネット */
    --shock:rgba(255,255,255,.85);  /* 衝撃リング */
    --shock-glow:rgba(255,240,2,.5);
    --spark1:#e60012; --spark2:#90c221; --spark3:#fff102; /* 火の粉/砂埃 */
    --wm-fill:var(--green);         /* AUROCHS 文字色 */
    --wm-shadow:var(--red);         /* AUROCHS 影色 */
    --grain-op:.06;
    --flash-rgb:255,255,255;  /* 衝突フラッシュの色（既定：白） */
    --flash-peak:.92;        /* 衝突フラッシュの強さ */
    --cyc:6.4s;
    --logo:url(https://aurochs.jp/wp-content/uploads/2026/05/aurochs-top.png);
    position:relative; width:100%;
    height:100svh; min-height:100vh;
    overflow:hidden; background:var(--bg0);
    font-family:"Saira Condensed",sans-serif;
    isolation:isolate; user-select:none;
  }
  @supports (height:100dvh){ .aurochs-hero{ height:100dvh; } }

  .ah-stage{ position:absolute; inset:0; overflow:hidden;
    animation:ah-shake var(--cyc) infinite; will-change:transform; }
  .ah-boost .ah-stage{ animation:ah-shake-boost var(--cyc) infinite; }

  /* ---- background ---- */
  .ah-bg{ position:absolute; inset:-2%;
    background:
      radial-gradient(120% 80% at 50% 118%, var(--bg2) 0%, var(--bg1) 34%, var(--bg0) 70%),
      radial-gradient(80% 60% at 50% 38%, rgba(var(--accent-rgb),var(--glow-a)), transparent 60%),
      linear-gradient(180deg,#000 0%, transparent 30%);
  }
  /* halftone dots */
  .ah-halftone{ position:absolute; inset:-10%;
    background-image:radial-gradient(var(--dot) 1px, transparent 1.6px);
    background-size:13px 13px;
    -webkit-mask:radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 72%);
            mask:radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 72%);
    opacity:.5; mix-blend-mode:screen; }

  /* concentration lines (集中線) */
  .ah-lines{ position:absolute; left:50%; top:54%; width:230vmax; height:230vmax;
    transform:translate(-50%,-50%); pointer-events:none;
    -webkit-mask:radial-gradient(closest-side, transparent 16%, #000 30%, #000 62%, transparent 80%);
            mask:radial-gradient(closest-side, transparent 16%, #000 30%, #000 62%, transparent 80%); }
  .ah-lines--ambient{
    background:repeating-conic-gradient(from 0deg,
      var(--line-amb) 0deg .4deg, transparent .4deg 1.5deg);
    opacity:.7; mix-blend-mode:screen; animation:ah-spin 38s linear infinite; }
  .ah-lines--burst{
    background:repeating-conic-gradient(from 0deg,
      transparent 0deg .6deg,
      var(--line-burst) .6deg .95deg, transparent .95deg 2.1deg);
    opacity:0; mix-blend-mode:screen;
    filter:drop-shadow(0 0 6px rgba(255,210,90,.7));   /* 衝突時のピカッと発光 */
    animation:ah-burst var(--cyc) infinite, ah-spin 6s linear infinite reverse;
    will-change:opacity,transform; }

  /* red glow pool behind bull */
  .ah-glow{ position:absolute; left:50%; top:53%; width:78vmin; height:78vmin;
    transform:translate(-50%,-50%) scale(.5);
    background:radial-gradient(circle, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.12) 45%, transparent 68%);
    filter:blur(8px); mix-blend-mode:screen; opacity:.25;
    animation:ah-glow var(--cyc) infinite; will-change:transform,opacity; }

  /* ground shock ring on impact */
  .ah-shockring{ position:absolute; left:50%; top:86%; width:46vmin; height:13vmin;
    transform:translate(-50%,-50%) scale(.2); border-radius:50%;
    border:.5vmin solid var(--shock);
    box-shadow:0 0 4vmin var(--shock-glow);
    opacity:0; animation:ah-shock var(--cyc) infinite; }

  /* second ring + landing dust puff (boost only) */
  .ah-shockring--2{ width:62vmin; height:18vmin; border-width:.28vmin;
    border-color:var(--shock-glow); box-shadow:none; opacity:0; animation:none; }
  .ah-boost .ah-shockring--2{ animation:ah-shock2 var(--cyc) infinite; }
  .ah-dustpuff{ position:absolute; left:50%; top:84%; width:56vmin; height:26vmin;
    transform:translate(-50%,-50%) scale(.3); border-radius:50%;
    background:radial-gradient(50% 60% at 50% 60%, rgba(var(--accent-rgb),.55), transparent 70%);
    filter:blur(10px); mix-blend-mode:screen; opacity:0; animation:none; }
  .ah-boost .ah-dustpuff{ animation:ah-puff var(--cyc) infinite; }

  /* ---- bull ---- */
  .ah-bullwrap{ position:absolute; left:50%; top:46%; width:min(74vmin,540px); aspect-ratio:1050/896;
    transform:translate(-50%,-50%); }
  .ah-bull{ position:absolute; inset:0; width:100%; height:100%;
    background:var(--logo) center/contain no-repeat;
    transform-origin:58% 56%; }
  .ah-bull--main{ animation:ah-charge var(--cyc) cubic-bezier(.4,0,.2,1) infinite;
    filter:drop-shadow(0 1.5vmin 2vmin rgba(0,0,0,.55));
    will-change:transform,filter; z-index:2; }
  .ah-bull--ghost{ opacity:0; filter:blur(7px) brightness(1.2) saturate(1.4);
    animation:ah-ghost var(--cyc) cubic-bezier(.4,0,.2,1) infinite; z-index:1; }
  .ah-bull-shadow{ position:absolute; left:50%; bottom:-7%; width:62%; height:7%;
    transform:translateX(-50%); background:radial-gradient(50% 50%, rgba(0,0,0,.6), transparent 72%);
    filter:blur(3px); animation:ah-bshadow var(--cyc) infinite; }

  /* ---- copy / wordmark ---- */
  .ah-copy{ position:absolute; left:50%; bottom:9.5%; transform:translateX(-50%);
    text-align:center; width:92%; z-index:5; }
  .ah-wordmark{ margin:0 0 .14em; line-height:.9; display:flex; justify-content:center;
    gap:.035em; font-family:"Bungee",sans-serif;
    font-size:52px;                 /* 既定＝最小幅。@mediaで段階的に拡大 */
    opacity:0; animation:ah-slam var(--cyc) cubic-bezier(.2,1.6,.3,1) infinite;
    will-change:transform,opacity; }
  .ah-wordmark span{ color:var(--wm-fill);
    -webkit-text-stroke:6px #000; paint-order:stroke fill;  /* clampやめ→@mediaで上書き */
    text-shadow:
      .1em .12em 0 var(--wm-shadow),
      .105em .125em 0 #000;
    animation:ah-letter 3.1s ease-in-out infinite; }
  .ah-wordmark span:nth-child(2n){ animation-delay:-1.2s; }
  .ah-wordmark span:nth-child(3n){ animation-delay:-.6s; }
  .ah-wordmark span:nth-child(odd){ transform:rotate(-1.4deg); }
  .ah-wordmark span:nth-child(even){ transform:rotate(1.6deg); }
  .ah-tagline{ display:flex; align-items:center; justify-content:center; gap:.8em;
    font-family:"Saira Condensed","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    font-weight:800; letter-spacing:.18em; text-indent:.18em; color:var(--paper);
    font-size:13px; opacity:0;
    animation:ah-tag var(--cyc) infinite; }
  .ah-tagline i{ height:2px; width:40px; background:var(--yellow);
    box-shadow:0 0 8px rgba(255,240,2,.6); }

  /* ===== ワードマーク／タグライン：幅で固定px（clampやめ→@media） =====
     フルワイド化時にサイト幅仕様へ左右されないよう、ブレークポイントで段階切替 */
  @media (min-width:360px){  .ah-wordmark{ font-size:60px; }  .ah-wordmark span{ -webkit-text-stroke-width:5px; } }
  @media (min-width:420px){  .ah-wordmark{ font-size:72px; } }
  @media (min-width:480px){  .ah-wordmark{ font-size:88px; }  .ah-wordmark span{ -webkit-text-stroke-width:7px; } }
  @media (min-width:600px){  .ah-wordmark{ font-size:104px; } }
  @media (min-width:768px){  .ah-wordmark{ font-size:128px; } .ah-wordmark span{ -webkit-text-stroke-width:8px; } .ah-tagline{ font-size:15px; letter-spacing:.28em; text-indent:.28em; } .ah-tagline i{ width:64px; } }
  @media (min-width:1100px){ .ah-wordmark{ font-size:150px; } .ah-wordmark span{ -webkit-text-stroke-width:9px; } .ah-tagline{ font-size:16px; letter-spacing:.32em; text-indent:.32em; } .ah-tagline i{ width:80px; } }
  @media (min-width:1600px){ .ah-wordmark{ font-size:172px; } }
  @media (min-width:2000px){ .ah-wordmark{ font-size:200px; } }

  /* ---- overlays ---- */
  .ah-flash{ position:absolute; inset:0; background:radial-gradient(circle at 50% 52%, rgba(var(--flash-rgb),1), rgba(var(--flash-rgb),1) 30%, rgba(var(--flash-rgb),0) 70%);
    opacity:0; mix-blend-mode:screen; animation:ah-flash var(--cyc) infinite; z-index:8; }
  .ah-vignette{ position:absolute; inset:0; pointer-events:none; z-index:7;
    background:radial-gradient(120% 100% at 50% 50%, transparent 52%, var(--vig) 100%); }
  .ah-grain{ position:absolute; inset:0; z-index:9; pointer-events:none; opacity:var(--grain-op);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:overlay; }

  /* embers + dust particles */
  .ah-embers,.ah-dust{ position:absolute; inset:0; pointer-events:none; }
  .ah-ember{ position:absolute; bottom:-3%; width:6px; height:6px; border-radius:50%;
    background:var(--c); box-shadow:0 0 8px var(--c); opacity:0;
    animation:ah-ember var(--d) linear infinite; animation-delay:var(--dl); }
  .ah-particle{ position:absolute; left:50%; top:53%; width:var(--s); height:var(--s);
    border-radius:50%; background:var(--c); box-shadow:0 0 6px var(--c);
    opacity:0; animation:ah-part var(--cyc) ease-out infinite;
    transform:translate(-50%,-50%); }
  .ah-streak{ position:absolute; left:50%; top:53%; height:2px; width:var(--s);
    background:linear-gradient(90deg,#fff,transparent); opacity:0;
    transform-origin:left center; transform:translate(0,-50%) rotate(var(--a));
    animation:ah-streak var(--cyc) ease-out infinite; }
  .ah-debris{ position:absolute; left:50%; top:52%; width:var(--s); height:var(--s);
    background:var(--c); opacity:0; border-radius:1px;
    transform:translate(-50%,-50%); animation:ah-debris var(--cyc) cubic-bezier(.15,.7,.3,1) infinite; }

  /* ---- scroll cue ---- */
  .ah-scroll{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
    z-index:9; display:flex; flex-direction:column; align-items:center; gap:6px;
    color:var(--paper); font-weight:800; letter-spacing:.4em; text-indent:.4em;
    font-size:10px; opacity:.55; }
  .ah-scroll b{ width:2px; height:26px; background:linear-gradient(var(--yellow),transparent);
    animation:ah-scroll 1.8s ease-in-out infinite; }

  /* ===== keyframes ===== */
  @keyframes ah-charge{
    0%   { transform:translate(-3%,5%)  scale(.32) rotate(-3deg); filter:brightness(.5)  drop-shadow(0 1vmin 2vmin rgba(0,0,0,.5)); }
    8%   { transform:translate(-3%,5%)  scale(.32) rotate(-3deg); filter:brightness(.5)  drop-shadow(0 1vmin 2vmin rgba(0,0,0,.5)); }
    22%  { transform:translate(2%,1%)   scale(.46) rotate(3deg);  filter:brightness(.72) drop-shadow(0 1vmin 2vmin rgba(0,0,0,.5)); }
    31%  { transform:translate(4%,3%)   scale(.40) rotate(-2.5deg);filter:brightness(.7) drop-shadow(0 1vmin 2vmin rgba(0,0,0,.5)); }
    44%  { transform:translate(-1%,-2%) scale(1.16) rotate(1.5deg);filter:brightness(1.2) drop-shadow(0 1.5vmin 2.4vmin rgba(0,0,0,.6)); }
    49%  { transform:translate(0,1%)    scale(.96) rotate(-1.2deg);filter:brightness(1)   drop-shadow(0 1.5vmin 2vmin rgba(0,0,0,.55)); }
    55%  { transform:translate(0,0)     scale(1.03) rotate(.6deg); filter:brightness(1)   drop-shadow(0 1.5vmin 2vmin rgba(0,0,0,.55)); }
    62%  { transform:translate(0,0)     scale(1)   rotate(0deg);   filter:brightness(1)   drop-shadow(0 1.5vmin 2vmin rgba(0,0,0,.55)); }
    74%  { transform:translate(0,-1.4%) scale(1.006) rotate(.4deg);filter:brightness(1.02)drop-shadow(0 1.5vmin 2vmin rgba(0,0,0,.55)); }
    86%  { transform:translate(0,0)     scale(1)   rotate(0deg);   filter:brightness(1)   drop-shadow(0 1.5vmin 2vmin rgba(0,0,0,.55)); }
    100% { transform:translate(-3%,5%)  scale(.32) rotate(-3deg);  filter:brightness(.5)  drop-shadow(0 1vmin 2vmin rgba(0,0,0,.5)); }
  }
  @keyframes ah-ghost{
    0%,30%{ opacity:0; transform:translate(-3%,5%) scale(.4) rotate(-3deg); }
    37%   { opacity:.5; transform:translate(-7%,1%) scale(.8) rotate(0deg); }
    44%   { opacity:.32; transform:translate(-9%,-2%) scale(1.18) rotate(1.5deg); }
    48%   { opacity:0; transform:translate(-6%,-1%) scale(1.1) rotate(0deg); }
    100%  { opacity:0; }
  }
  @keyframes ah-bshadow{
    0%,8%{ opacity:0; transform:translateX(-50%) scaleX(.4); }
    44%  { opacity:.5; transform:translateX(-50%) scaleX(1.15); }
    62%,86%{ opacity:.55; transform:translateX(-50%) scaleX(1); }
    100% { opacity:0; transform:translateX(-50%) scaleX(.4); }
  }
  @keyframes ah-shake{
    0%,42%,53%,100%{ transform:translate(0,0); }
    44%{ transform:translate(8px,-6px); } 45%{ transform:translate(-9px,7px); }
    46%{ transform:translate(7px,5px); }  47%{ transform:translate(-6px,-6px); }
    48%{ transform:translate(5px,4px); }  49%{ transform:translate(-4px,-3px); }
    50%{ transform:translate(3px,2px); }  51%{ transform:translate(-2px,1px); }
  }
  @keyframes ah-flash{ 0%,42%{opacity:0;} 44%{opacity:var(--flash-peak);} 50%{opacity:0;} 100%{opacity:0;} }
  @keyframes ah-shake-boost{
    0%,41%,54%,100%{ transform:translate(0,0) scale(1); }
    43%{ transform:translate(0,0) scale(1.06); }
    44%{ transform:translate(11px,-8px) scale(1.05); } 45%{ transform:translate(-12px,9px) scale(1.045); }
    46%{ transform:translate(9px,7px) scale(1.035); }  47%{ transform:translate(-8px,-8px) scale(1.028); }
    48%{ transform:translate(6px,5px) scale(1.02); }   49%{ transform:translate(-5px,-4px) scale(1.014); }
    50%{ transform:translate(4px,3px) scale(1.008); }  51%{ transform:translate(-3px,2px) scale(1.004); }
  }
  @keyframes ah-shock2{ 0%,44%{opacity:0;transform:translate(-50%,-50%) scale(.25);}
    47%{opacity:.85;} 60%{opacity:0;transform:translate(-50%,-50%) scale(2.3);} 100%{opacity:0;} }
  @keyframes ah-puff{ 0%,43%{opacity:0;transform:translate(-50%,-50%) scale(.3);}
    47%{opacity:.8;} 70%{opacity:0;transform:translate(-50%,-65%) scale(1.4);} 100%{opacity:0;} }
  @keyframes ah-debris{ 0%,43%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg);}
    47%{opacity:1;}
    66%{opacity:0;
      transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(var(--rot));}
    100%{opacity:0;} }
  @keyframes ah-burst{ 0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
    36%{opacity:.6;transform:translate(-50%,-50%) scale(.9);}
    44%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}
    52%{opacity:0;transform:translate(-50%,-50%) scale(1.2);} 100%{opacity:0;} }
  @keyframes ah-spin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
  @keyframes ah-glow{ 0%,18%{opacity:.18;transform:translate(-50%,-50%) scale(.5);}
    44%{opacity:.85;transform:translate(-50%,-50%) scale(1.15);}
    62%{opacity:.4;transform:translate(-50%,-50%) scale(.95);}
    100%{opacity:.18;transform:translate(-50%,-50%) scale(.5);} }
  @keyframes ah-shock{ 0%,43%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
    45%{opacity:.9;} 56%{opacity:0;transform:translate(-50%,-50%) scale(1.8);} 100%{opacity:0;} }
  @keyframes ah-kicker{ 0%,40%{opacity:0;transform:translateY(14px);}
    47%{opacity:1;transform:translateY(0);} 86%{opacity:1;} 96%,100%{opacity:0;} }
  @keyframes ah-slam{
    0%,42%{ opacity:0; transform:translateY(46px) scale(1.5); filter:blur(7px); }
    46%   { opacity:1; transform:translateY(-6px) scale(.97); filter:blur(0); }
    52%   { transform:translateY(0) scale(1); }
    86%   { opacity:1; transform:translateY(0) scale(1); }
    96%,100%{ opacity:0; transform:translateY(10px) scale(.98); }
  }
  @keyframes ah-letter{ 0%,100%{ translate:0 0; } 50%{ translate:0 -3px; } }
  @keyframes ah-tag{ 0%,46%{opacity:0;} 54%{opacity:.95;} 86%{opacity:.95;} 96%,100%{opacity:0;} }
  @keyframes ah-ember{ 0%{opacity:0;transform:translateY(0) translateX(0);}
    10%{opacity:.9;} 90%{opacity:.5;} 100%{opacity:0;transform:translateY(-86vh) translateX(var(--x));} }
  @keyframes ah-part{ 0%,43%{opacity:0;transform:translate(-50%,-50%) scale(.3);}
    46%{opacity:1;} 60%{opacity:0;
      transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1);} 100%{opacity:0;} }
  @keyframes ah-streak{ 0%,43%{opacity:0;width:0;}
    46%{opacity:.9;} 58%{opacity:0;width:var(--s);} 100%{opacity:0;} }
  @keyframes ah-scroll{ 0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.4;}
    50%{transform:scaleY(1);opacity:1;} }

  @media (max-width:640px){
    .ah-copy{ bottom:11%; }
    .ah-bullwrap{ top:46%; width:min(86vmin,440px); }
  }
  @media (prefers-reduced-motion:reduce){
    .ah-stage,.ah-bull--main,.ah-bull--ghost,.ah-bull-shadow,.ah-glow,.ah-shockring,
    .ah-shockring--2,.ah-dustpuff,.ah-debris,
    .ah-lines--burst,.ah-flash,.ah-kicker,.ah-wordmark,.ah-wordmark span,.ah-tagline,
    .ah-particle,.ah-streak,.ah-ember,.ah-scroll b{ animation:none !important; }
    .ah-boost .ah-stage{ animation:none !important; }
    .ah-bull--main{ transform:none; } .ah-bull--ghost{ display:none; }
    .ah-wordmark,.ah-kicker,.ah-tagline{ opacity:1; } .ah-glow{ opacity:.4; }
  }

  /* ===== SKIN v3 : オレンジ寄り（ロゴ以外を温色化）＋演出ブースト ===== */
  .aurochs-hero{
    --yellow:#ffb43a;
    --bg0:#160b04; --bg1:#3a1602; --bg2:#5e2c00;
    --accent-rgb:255,110,0;
    --glow-a:.28;
    --dot:rgba(255,184,120,.10);
    --line-amb:rgba(255,184,70,.5);    /* 常時：オレンジ黄でしっかり視認 */
    --line-burst:rgba(255,236,170,.9);  /* 炸裂：明るい黄でピカッと */
    --vig:rgba(40,12,0,.72);
    --shock:rgba(255,185,95,.9);
    --shock-glow:rgba(255,120,0,.55);
    --spark1:#ff7a00; --spark2:#ffb13b; --spark3:#ffe6b0;
    --wm-fill:#ffb13b; --wm-shadow:#e64a00;
    --flash-rgb:255,176,92;   /* 衝突フラッシュをオレンジ寄りの白へ */
    --flash-peak:1;
    /* フルワイド化（サイト幅を突き抜けて全幅表示） */
    width:100vw; left:50%; margin-left:-50vw;
  }