/*
 * トップページのロゴの演出（アプリの src/components/brand/wolfs-intro-logo.tsx と同じ動き）。
 * このファイルは hosting/scripts/intro-css.mjs から hosting/scripts/build-legal.mjs で生成しています。直接編集しないでください。
 * 動きを減らす設定・印刷では使わない（ふつうのロゴだけを出す。.intro-parts は hosting/styles.css で既定は非表示）。
 */
@media screen and (prefers-reduced-motion: no-preference) {
  .intro-parts {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 2950 / 690;
    pointer-events: none;
    animation: intro-parts 0s linear 7070ms both;
  }

  /* 飛び込んだ瞬間に O を中心にぷるんと揺れる */
  .intro-logo {
    position: absolute;
    inset: 0;
    transform-origin: 40.704% 49.752%;
    animation: intro-gulp 5130ms linear 1940ms both;
  }

  .intro .intro-wordmark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* O の円の形で顔を切り抜く（顔は O の下から上がってくる） */
  .intro-o {
    position: absolute;
    inset: 0;
    clip-path: ellipse(10.936% 46.754% at 40.704% 49.752%);
  }

  /* 顔の画像はロゴと同じ大きさ（顔はロゴと同じ位置にある）。傾きは顔（FACE）の中心を中心にする */
  .intro .intro-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 40.339% 55.797%;
    animation: intro-face 1560ms linear 2200ms both;
  }

  /* 地面の影（高く跳ぶほど小さく薄くなる。O へのジャンプで消える） */
  .intro-shadow {
    position: absolute;
    left: 0;
    top: calc(238.411% + 7px);
    width: 12%;
    height: 10px;
    border-radius: 5px;
    background: #000000;
    animation: intro-shadow 2000ms linear 0ms both;
  }

  /* 跳ねるウサギ（伸び縮みと傾きは足もとを中心にする） */
  .intro .intro-runner {
    position: absolute;
    left: 0;
    top: 0;
    width: 16%;
    height: auto;
    aspect-ratio: 385 / 410;
    max-width: none;
    transform-origin: 50% 100%;
    animation: intro-run 2000ms linear 0ms both;
  }

  /*
   * 演出の間はふつうのロゴ（読み上げ用の alt を持つ画像）を切り抜いて隠し、終わったら出す。opacity で隠すと、
   * 終わった後も合成用のレイヤーに残って文字のふちの描き方が少し変わるため、clip-path で隠す（読み上げには残る）
   */
  .intro-still {
    animation: intro-still 0s linear 7070ms both;
  }

  /* キャッチコピーと説明は、ウサギが跳ねる場所に重なるため、アプリの一言と同じく顔が出そろってからフェードインする */
  .intro-fade {
    animation: intro-fade 500ms 3050ms both;
  }
}

@keyframes intro-parts {
  from { visibility: visible; }
  to { visibility: hidden; }
}

@keyframes intro-still {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: none; }
}

/* Easing.inOut(Easing.quad)（前半は ease-in の2次、後半は ease-out の2次） */
@keyframes intro-fade {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0.3333); }
  50% { opacity: 0.5; animation-timing-function: cubic-bezier(0.3333, 0.6667, 0.6667, 1); }
  100% { opacity: 1; }
}

@keyframes intro-run {
  0% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(0deg) scale(1, 1); opacity: 1; }
  0.5% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-1.85deg) scale(1.0879, 0.8901); opacity: 1; }
  0.8% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-2.96deg) scale(1.1283, 0.8396); opacity: 1; }
  1.1% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-4.07deg) scale(1.1533, 0.8084); opacity: 1; }
  1.4% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-5.19deg) scale(1.1597, 0.8003); opacity: 1; }
  1.7% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-6.3deg) scale(1.1469, 0.8164); opacity: 1; }
  2% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-7.41deg) scale(1.1164, 0.8545); opacity: 1; }
  2.4% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-8.89deg) scale(1.0547, 0.9316); opacity: 1; }
  2.6% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-9.63deg) scale(1.0186, 0.9768); opacity: 1; }
  2.7% { transform: translate(calc(212.5% - 50vw - 8px), calc(227.273% + 12px)) rotate(-20deg) scale(0.92, 1.14); opacity: 1; }
  3.4% { transform: translate(calc(210.535% - 49.306vw - 7.89px), calc(211.532% + 12px)) rotate(-18deg) scale(0.9289, 1.1244); opacity: 1; }
  4.1% { transform: translate(calc(208.571% - 48.611vw - 7.78px), calc(197.643% + 12px)) rotate(-16deg) scale(0.9378, 1.1089); opacity: 1; }
  4.8% { transform: translate(calc(206.606% - 47.917vw - 7.67px), calc(185.606% + 12px)) rotate(-14deg) scale(0.9467, 1.0933); opacity: 1; }
  5.5% { transform: translate(calc(204.642% - 47.222vw - 7.56px), calc(175.421% + 12px)) rotate(-12deg) scale(0.9556, 1.0778); opacity: 1; }
  6.2% { transform: translate(calc(202.677% - 46.528vw - 7.44px), calc(167.087% + 12px)) rotate(-10deg) scale(0.9644, 1.0622); opacity: 1; }
  6.9% { transform: translate(calc(200.713% - 45.833vw - 7.33px), calc(160.606% + 12px)) rotate(-8deg) scale(0.9733, 1.0467); opacity: 1; }
  7.6% { transform: translate(calc(198.748% - 45.139vw - 7.22px), calc(155.976% + 12px)) rotate(-6deg) scale(0.9822, 1.0311); opacity: 1; }
  8.3% { transform: translate(calc(196.783% - 44.444vw - 7.11px), calc(153.199% + 12px)) rotate(-4deg) scale(0.9911, 1.0156); opacity: 1; }
  9% { transform: translate(calc(194.819% - 43.75vw - 7px), calc(152.273% + 12px)) rotate(-2deg) scale(1, 1); opacity: 1; }
  9.7% { transform: translate(calc(192.854% - 43.056vw - 6.89px), calc(153.199% + 12px)) rotate(0deg) scale(0.9911, 1.0156); opacity: 1; }
  10.4% { transform: translate(calc(190.89% - 42.361vw - 6.78px), calc(155.976% + 12px)) rotate(2deg) scale(0.9822, 1.0311); opacity: 1; }
  11.1% { transform: translate(calc(188.925% - 41.667vw - 6.67px), calc(160.606% + 12px)) rotate(4deg) scale(0.9733, 1.0467); opacity: 1; }
  11.8% { transform: translate(calc(186.961% - 40.972vw - 6.56px), calc(167.087% + 12px)) rotate(6deg) scale(0.9644, 1.0622); opacity: 1; }
  12.5% { transform: translate(calc(184.996% - 40.278vw - 6.44px), calc(175.421% + 12px)) rotate(8deg) scale(0.9556, 1.0778); opacity: 1; }
  13.2% { transform: translate(calc(183.031% - 39.583vw - 6.33px), calc(185.606% + 12px)) rotate(10deg) scale(0.9467, 1.0933); opacity: 1; }
  13.9% { transform: translate(calc(181.067% - 38.889vw - 6.22px), calc(197.643% + 12px)) rotate(12deg) scale(0.9378, 1.1089); opacity: 1; }
  14.6% { transform: translate(calc(179.102% - 38.194vw - 6.11px), calc(211.532% + 12px)) rotate(14deg) scale(0.9289, 1.1244); opacity: 1; }
  15.2% { transform: translate(calc(177.418% - 37.599vw - 6.02px), calc(224.911% + 12px)) rotate(15.71deg) scale(0.9213, 1.1378); opacity: 1; }
  15.3% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(16deg) scale(1, 1); opacity: 1; }
  15.8% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(13.04deg) scale(1.1099, 0.8681); opacity: 1; }
  16.1% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(11.26deg) scale(1.1604, 0.8075); opacity: 1; }
  16.4% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(9.48deg) scale(1.1916, 0.7701); opacity: 1; }
  16.6% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(8.3deg) scale(1.1997, 0.7604); opacity: 1; }
  16.8% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(7.11deg) scale(1.197, 0.7636); opacity: 1; }
  17% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(5.93deg) scale(1.1836, 0.7796); opacity: 1; }
  17.3% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(4.15deg) scale(1.1455, 0.8254); opacity: 1; }
  17.6% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(2.37deg) scale(1.0898, 0.8923); opacity: 1; }
  18% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(0deg) scale(1, 1); opacity: 1; }
  18.5% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-1.85deg) scale(1.0879, 0.8901); opacity: 1; }
  18.8% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-2.96deg) scale(1.1283, 0.8396); opacity: 1; }
  19.1% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-4.07deg) scale(1.1533, 0.8084); opacity: 1; }
  19.4% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-5.19deg) scale(1.1597, 0.8003); opacity: 1; }
  19.7% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-6.3deg) scale(1.1469, 0.8164); opacity: 1; }
  20% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-7.41deg) scale(1.1164, 0.8545); opacity: 1; }
  20.4% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-8.89deg) scale(1.0547, 0.9316); opacity: 1; }
  20.7% { transform: translate(calc(177.138% - 37.5vw - 6px), calc(227.273% + 12px)) rotate(-10deg) scale(1, 1); opacity: 1; }
  20.8% { transform: translate(calc(176.857% - 37.401vw - 5.98px), calc(224.911% + 12px)) rotate(-19.71deg) scale(0.9213, 1.1378); opacity: 1; }
  21.5% { transform: translate(calc(174.892% - 36.706vw - 5.87px), calc(209.434% + 12px)) rotate(-17.71deg) scale(0.9302, 1.1222); opacity: 1; }
  22.2% { transform: translate(calc(172.928% - 36.012vw - 5.76px), calc(195.81% + 12px)) rotate(-15.71deg) scale(0.939, 1.1067); opacity: 1; }
  22.9% { transform: translate(calc(170.963% - 35.317vw - 5.65px), calc(184.038% + 12px)) rotate(-13.71deg) scale(0.9479, 1.0911); opacity: 1; }
  23.6% { transform: translate(calc(168.999% - 34.623vw - 5.54px), calc(174.117% + 12px)) rotate(-11.71deg) scale(0.9568, 1.0756); opacity: 1; }
  24.3% { transform: translate(calc(167.034% - 33.929vw - 5.43px), calc(166.048% + 12px)) rotate(-9.71deg) scale(0.9657, 1.06); opacity: 1; }
  25% { transform: translate(calc(165.07% - 33.234vw - 5.32px), calc(159.831% + 12px)) rotate(-7.71deg) scale(0.9746, 1.0444); opacity: 1; }
  25.7% { transform: translate(calc(163.105% - 32.54vw - 5.21px), calc(155.466% + 12px)) rotate(-5.71deg) scale(0.9835, 1.0289); opacity: 1; }
  26.4% { transform: translate(calc(161.14% - 31.845vw - 5.1px), calc(152.953% + 12px)) rotate(-3.71deg) scale(0.9924, 1.0133); opacity: 1; }
  27% { transform: translate(calc(159.457% - 31.25vw - 5px), calc(152.273% + 12px)) rotate(-2deg) scale(1, 1); opacity: 1; }
  27.7% { transform: translate(calc(157.492% - 30.556vw - 4.89px), calc(153.199% + 12px)) rotate(0deg) scale(0.9911, 1.0156); opacity: 1; }
  28.4% { transform: translate(calc(155.527% - 29.861vw - 4.78px), calc(155.976% + 12px)) rotate(2deg) scale(0.9822, 1.0311); opacity: 1; }
  29.1% { transform: translate(calc(153.563% - 29.167vw - 4.67px), calc(160.606% + 12px)) rotate(4deg) scale(0.9733, 1.0467); opacity: 1; }
  29.8% { transform: translate(calc(151.598% - 28.472vw - 4.56px), calc(167.087% + 12px)) rotate(6deg) scale(0.9644, 1.0622); opacity: 1; }
  30.5% { transform: translate(calc(149.634% - 27.778vw - 4.44px), calc(175.421% + 12px)) rotate(8deg) scale(0.9556, 1.0778); opacity: 1; }
  31.2% { transform: translate(calc(147.669% - 27.083vw - 4.33px), calc(185.606% + 12px)) rotate(10deg) scale(0.9467, 1.0933); opacity: 1; }
  31.9% { transform: translate(calc(145.705% - 26.389vw - 4.22px), calc(197.643% + 12px)) rotate(12deg) scale(0.9378, 1.1089); opacity: 1; }
  32.6% { transform: translate(calc(143.74% - 25.694vw - 4.11px), calc(211.532% + 12px)) rotate(14deg) scale(0.9289, 1.1244); opacity: 1; }
  33.2% { transform: translate(calc(142.056% - 25.099vw - 4.02px), calc(224.911% + 12px)) rotate(15.71deg) scale(0.9213, 1.1378); opacity: 1; }
  33.3% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(16deg) scale(1, 1); opacity: 1; }
  33.8% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(13.04deg) scale(1.1099, 0.8681); opacity: 1; }
  34.1% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(11.26deg) scale(1.1604, 0.8075); opacity: 1; }
  34.4% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(9.48deg) scale(1.1916, 0.7701); opacity: 1; }
  34.6% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(8.3deg) scale(1.1997, 0.7604); opacity: 1; }
  34.8% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(7.11deg) scale(1.197, 0.7636); opacity: 1; }
  35% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(5.93deg) scale(1.1836, 0.7796); opacity: 1; }
  35.3% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(4.15deg) scale(1.1455, 0.8254); opacity: 1; }
  35.6% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(2.37deg) scale(1.0898, 0.8923); opacity: 1; }
  36% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(0deg) scale(1, 1); opacity: 1; }
  36.5% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-1.85deg) scale(1.0879, 0.8901); opacity: 1; }
  36.8% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-2.96deg) scale(1.1283, 0.8396); opacity: 1; }
  37.1% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-4.07deg) scale(1.1533, 0.8084); opacity: 1; }
  37.4% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-5.19deg) scale(1.1597, 0.8003); opacity: 1; }
  37.7% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-6.3deg) scale(1.1469, 0.8164); opacity: 1; }
  38% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-7.41deg) scale(1.1164, 0.8545); opacity: 1; }
  38.4% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-8.89deg) scale(1.0547, 0.9316); opacity: 1; }
  38.6% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-9.63deg) scale(1.0186, 0.9768); opacity: 1; }
  38.7% { transform: translate(calc(141.775% - 25vw - 4px), calc(227.273% + 12px)) rotate(-20deg) scale(0.92, 1.14); opacity: 1; }
  39.4% { transform: translate(calc(139.811% - 24.306vw - 3.89px), calc(211.532% + 12px)) rotate(-18deg) scale(0.9289, 1.1244); opacity: 1; }
  40.1% { transform: translate(calc(137.846% - 23.611vw - 3.78px), calc(197.643% + 12px)) rotate(-16deg) scale(0.9378, 1.1089); opacity: 1; }
  40.8% { transform: translate(calc(135.882% - 22.917vw - 3.67px), calc(185.606% + 12px)) rotate(-14deg) scale(0.9467, 1.0933); opacity: 1; }
  41.5% { transform: translate(calc(133.917% - 22.222vw - 3.56px), calc(175.421% + 12px)) rotate(-12deg) scale(0.9556, 1.0778); opacity: 1; }
  42.2% { transform: translate(calc(131.953% - 21.528vw - 3.44px), calc(167.087% + 12px)) rotate(-10deg) scale(0.9644, 1.0622); opacity: 1; }
  42.9% { transform: translate(calc(129.988% - 20.833vw - 3.33px), calc(160.606% + 12px)) rotate(-8deg) scale(0.9733, 1.0467); opacity: 1; }
  43.6% { transform: translate(calc(128.023% - 20.139vw - 3.22px), calc(155.976% + 12px)) rotate(-6deg) scale(0.9822, 1.0311); opacity: 1; }
  44.3% { transform: translate(calc(126.059% - 19.444vw - 3.11px), calc(153.199% + 12px)) rotate(-4deg) scale(0.9911, 1.0156); opacity: 1; }
  45% { transform: translate(calc(124.094% - 18.75vw - 3px), calc(152.273% + 12px)) rotate(-2deg) scale(1, 1); opacity: 1; }
  45.7% { transform: translate(calc(122.13% - 18.056vw - 2.89px), calc(153.199% + 12px)) rotate(0deg) scale(0.9911, 1.0156); opacity: 1; }
  46.4% { transform: translate(calc(120.165% - 17.361vw - 2.78px), calc(155.976% + 12px)) rotate(2deg) scale(0.9822, 1.0311); opacity: 1; }
  47.1% { transform: translate(calc(118.201% - 16.667vw - 2.67px), calc(160.606% + 12px)) rotate(4deg) scale(0.9733, 1.0467); opacity: 1; }
  47.8% { transform: translate(calc(116.236% - 15.972vw - 2.56px), calc(167.087% + 12px)) rotate(6deg) scale(0.9644, 1.0622); opacity: 1; }
  48.5% { transform: translate(calc(114.271% - 15.278vw - 2.44px), calc(175.421% + 12px)) rotate(8deg) scale(0.9556, 1.0778); opacity: 1; }
  49.2% { transform: translate(calc(112.307% - 14.583vw - 2.33px), calc(185.606% + 12px)) rotate(10deg) scale(0.9467, 1.0933); opacity: 1; }
  49.9% { transform: translate(calc(110.342% - 13.889vw - 2.22px), calc(197.643% + 12px)) rotate(12deg) scale(0.9378, 1.1089); opacity: 1; }
  50.6% { transform: translate(calc(108.378% - 13.194vw - 2.11px), calc(211.532% + 12px)) rotate(14deg) scale(0.9289, 1.1244); opacity: 1; }
  51.2% { transform: translate(calc(106.694% - 12.599vw - 2.02px), calc(224.911% + 12px)) rotate(15.71deg) scale(0.9213, 1.1378); opacity: 1; }
  51.3% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(16deg) scale(1, 1); opacity: 1; }
  51.8% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(13.04deg) scale(1.1099, 0.8681); opacity: 1; }
  52.1% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(11.26deg) scale(1.1604, 0.8075); opacity: 1; }
  52.4% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(9.48deg) scale(1.1916, 0.7701); opacity: 1; }
  52.6% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(8.3deg) scale(1.1997, 0.7604); opacity: 1; }
  52.8% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(7.11deg) scale(1.197, 0.7636); opacity: 1; }
  53% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(5.93deg) scale(1.1836, 0.7796); opacity: 1; }
  53.3% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(4.15deg) scale(1.1455, 0.8254); opacity: 1; }
  53.6% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(2.37deg) scale(1.0898, 0.8923); opacity: 1; }
  54% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(0deg) scale(1, 1); opacity: 1; }
  54.5% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-1.85deg) scale(1.0879, 0.8901); opacity: 1; }
  54.8% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-2.96deg) scale(1.1283, 0.8396); opacity: 1; }
  55.1% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-4.07deg) scale(1.1533, 0.8084); opacity: 1; }
  55.4% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-5.19deg) scale(1.1597, 0.8003); opacity: 1; }
  55.7% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-6.3deg) scale(1.1469, 0.8164); opacity: 1; }
  56% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-7.41deg) scale(1.1164, 0.8545); opacity: 1; }
  56.4% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-8.89deg) scale(1.0547, 0.9316); opacity: 1; }
  56.7% { transform: translate(calc(106.413% - 12.5vw - 2px), calc(227.273% + 12px)) rotate(-10deg) scale(1, 1); opacity: 1; }
  56.8% { transform: translate(calc(106.132% - 12.401vw - 1.98px), calc(224.911% + 12px)) rotate(-19.71deg) scale(0.9213, 1.1378); opacity: 1; }
  57.5% { transform: translate(calc(104.168% - 11.706vw - 1.87px), calc(209.434% + 12px)) rotate(-17.71deg) scale(0.9302, 1.1222); opacity: 1; }
  58.2% { transform: translate(calc(102.203% - 11.012vw - 1.76px), calc(195.81% + 12px)) rotate(-15.71deg) scale(0.939, 1.1067); opacity: 1; }
  58.9% { transform: translate(calc(100.239% - 10.317vw - 1.65px), calc(184.038% + 12px)) rotate(-13.71deg) scale(0.9479, 1.0911); opacity: 1; }
  59.6% { transform: translate(calc(98.274% - 9.623vw - 1.54px), calc(174.117% + 12px)) rotate(-11.71deg) scale(0.9568, 1.0756); opacity: 1; }
  60.3% { transform: translate(calc(96.31% - 8.929vw - 1.43px), calc(166.048% + 12px)) rotate(-9.71deg) scale(0.9657, 1.06); opacity: 1; }
  61% { transform: translate(calc(94.345% - 8.234vw - 1.32px), calc(159.831% + 12px)) rotate(-7.71deg) scale(0.9746, 1.0444); opacity: 1; }
  61.7% { transform: translate(calc(92.38% - 7.54vw - 1.21px), calc(155.466% + 12px)) rotate(-5.71deg) scale(0.9835, 1.0289); opacity: 1; }
  62.4% { transform: translate(calc(90.416% - 6.845vw - 1.1px), calc(152.953% + 12px)) rotate(-3.71deg) scale(0.9924, 1.0133); opacity: 1; }
  63% { transform: translate(calc(88.732% - 6.25vw - 1px), calc(152.273% + 12px)) rotate(-2deg) scale(1, 1); opacity: 1; }
  63.7% { transform: translate(calc(86.767% - 5.556vw - 0.89px), calc(153.199% + 12px)) rotate(0deg) scale(0.9911, 1.0156); opacity: 1; }
  64.4% { transform: translate(calc(84.803% - 4.861vw - 0.78px), calc(155.976% + 12px)) rotate(2deg) scale(0.9822, 1.0311); opacity: 1; }
  65.1% { transform: translate(calc(82.838% - 4.167vw - 0.67px), calc(160.606% + 12px)) rotate(4deg) scale(0.9733, 1.0467); opacity: 1; }
  65.8% { transform: translate(calc(80.874% - 3.472vw - 0.56px), calc(167.087% + 12px)) rotate(6deg) scale(0.9644, 1.0622); opacity: 1; }
  66.5% { transform: translate(calc(78.909% - 2.778vw - 0.44px), calc(175.421% + 12px)) rotate(8deg) scale(0.9556, 1.0778); opacity: 1; }
  67.2% { transform: translate(calc(76.945% - 2.083vw - 0.33px), calc(185.606% + 12px)) rotate(10deg) scale(0.9467, 1.0933); opacity: 1; }
  67.9% { transform: translate(calc(74.98% - 1.389vw - 0.22px), calc(197.643% + 12px)) rotate(12deg) scale(0.9378, 1.1089); opacity: 1; }
  68.6% { transform: translate(calc(73.015% - 0.694vw - 0.11px), calc(211.532% + 12px)) rotate(14deg) scale(0.9289, 1.1244); opacity: 1; }
  69.3% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(16deg) scale(0.92, 1.14); opacity: 1; }
  69.4% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(15.41deg) scale(1.0232, 0.9721); opacity: 1; }
  69.8% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(13.04deg) scale(1.1099, 0.8681); opacity: 1; }
  70.1% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(11.26deg) scale(1.1604, 0.8075); opacity: 1; }
  70.4% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(9.48deg) scale(1.1916, 0.7701); opacity: 1; }
  70.6% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(8.3deg) scale(1.1997, 0.7604); opacity: 1; }
  70.8% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(7.11deg) scale(1.197, 0.7636); opacity: 1; }
  71% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(5.93deg) scale(1.1836, 0.7796); opacity: 1; }
  71.3% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(4.15deg) scale(1.1455, 0.8254); opacity: 1; }
  71.6% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(2.37deg) scale(1.0898, 0.8923); opacity: 1; }
  72% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(0deg) scale(1, 1); opacity: 1; }
  73.1% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(-4.58deg) scale(1.1082, 0.8623); opacity: 1; }
  73.8% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(-7.5deg) scale(1.164, 0.7912); opacity: 1; }
  74.4% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(-10deg) scale(1.1982, 0.7477); opacity: 1; }
  75% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(-12.5deg) scale(1.2169, 0.724); opacity: 1; }
  75.3% { transform: translate(calc(71.051% + 0vw + 0px), calc(227.273% + 12px)) rotate(-13.75deg) scale(1.2199, 0.7201); opacity: 1; }
  75.4% { transform: translate(calc(71.267% + 0vw + 0px), calc(225.944% + 11.96px)) rotate(-27.87deg) scale(0.9002, 1.1797); opacity: 1; }
  76.4% { transform: translate(calc(76.679% + 0vw + 0px), calc(193.78% + 11.01px)) rotate(-24.62deg) scale(0.903, 1.1708); opacity: 1; }
  77.4% { transform: translate(calc(82.091% + 0vw + 0px), calc(163.627% + 10.1px)) rotate(-21.38deg) scale(0.9036, 1.1591); opacity: 1; }
  78.4% { transform: translate(calc(87.503% + 0vw + 0px), calc(135.483% + 9.22px)) rotate(-18.13deg) scale(0.9019, 1.1446); opacity: 1; }
  79.4% { transform: translate(calc(92.915% + 0vw + 0px), calc(109.351% + 8.39px)) rotate(-14.88deg) scale(0.8979, 1.1273); opacity: 1; }
  80.4% { transform: translate(calc(98.326% + 0vw + 0px), calc(85.228% + 7.59px)) rotate(-11.64deg) scale(0.8916, 1.1073); opacity: 1; }
  81.4% { transform: translate(calc(103.738% + 0vw + 0px), calc(63.116% + 6.84px)) rotate(-8.39deg) scale(0.8828, 1.0847); opacity: 1; }
  82.4% { transform: translate(calc(109.15% + 0vw + 0px), calc(43.015% + 6.12px)) rotate(-5.14deg) scale(0.8717, 1.0595); opacity: 1; }
  83.4% { transform: translate(calc(114.562% + 0vw + 0px), calc(24.924% + 5.45px)) rotate(-1.9deg) scale(0.8582, 1.0317); opacity: 1; }
  84.4% { transform: translate(calc(119.974% + 0vw + 0px), calc(8.843% + 4.81px)) rotate(1.35deg) scale(0.8421, 1.0015); opacity: 1; }
  85.4% { transform: translate(calc(125.386% + 0vw + 0px), calc(-5.227% + 4.21px)) rotate(4.6deg) scale(0.8236, 0.9689); opacity: 1; }
  86.4% { transform: translate(calc(130.797% + 0vw + 0px), calc(-17.287% + 3.66px)) rotate(7.84deg) scale(0.8026, 0.9338); opacity: 1; }
  87.4% { transform: translate(calc(136.209% + 0vw + 0px), calc(-27.336% + 3.14px)) rotate(11.09deg) scale(0.7789, 0.8965); opacity: 1; }
  88.4% { transform: translate(calc(141.621% + 0vw + 0px), calc(-35.375% + 2.66px)) rotate(14.34deg) scale(0.7528, 0.8569); opacity: 1; }
  89.4% { transform: translate(calc(147.033% + 0vw + 0px), calc(-41.403% + 2.22px)) rotate(17.58deg) scale(0.7239, 0.8151); opacity: 1; }
  90.4% { transform: translate(calc(152.445% + 0vw + 0px), calc(-45.421% + 1.82px)) rotate(20.83deg) scale(0.6925, 0.7711); opacity: 1; }
  91.4% { transform: translate(calc(157.857% + 0vw + 0px), calc(-47.429% + 1.46px)) rotate(24.08deg) scale(0.6584, 0.725); opacity: 1; }
  92.4% { transform: translate(calc(163.268% + 0vw + 0px), calc(-47.426% + 1.14px)) rotate(27.32deg) scale(0.6215, 0.6769); opacity: 1; }
  93.4% { transform: translate(calc(168.68% + 0vw + 0px), calc(-45.413% + 0.86px)) rotate(30.57deg) scale(0.582, 0.6268); opacity: 1; }
  94.4% { transform: translate(calc(174.092% + 0vw + 0px), calc(-41.389% + 0.62px)) rotate(33.82deg) scale(0.5396, 0.5748); opacity: 1; }
  95.1% { transform: translate(calc(177.88% + 0vw + 0px), calc(-37.376% + 0.47px)) rotate(36.09deg) scale(0.5083, 0.5372); opacity: 0.994; }
  96.1% { transform: translate(calc(183.292% + 0vw + 0px), calc(-29.935% + 0.3px)) rotate(39.34deg) scale(0.4612, 0.482); opacity: 0.791; }
  97.1% { transform: translate(calc(188.704% + 0vw + 0px), calc(-20.483% + 0.17px)) rotate(42.58deg) scale(0.4113, 0.425); opacity: 0.588; }
  98.1% { transform: translate(calc(194.116% + 0vw + 0px), calc(-9.021% + 0.07px)) rotate(45.83deg) scale(0.3584, 0.3662); opacity: 0.386; }
  99.1% { transform: translate(calc(199.528% + 0vw + 0px), calc(4.452% + 0.02px)) rotate(49.08deg) scale(0.3027, 0.3058); opacity: 0.183; }
  100% { transform: translate(calc(204.398% + 0vw + 0px), calc(18.296% + 0px)) rotate(52deg) scale(0.25, 0.25); opacity: 0; }
}

@keyframes intro-shadow {
  0% { transform: translateX(calc(300% - 50vw - 8px)) scaleX(1); opacity: 0.16; }
  2.7% { transform: translateX(calc(300% - 50vw - 8px)) scaleX(1); opacity: 0.16; }
  4.2% { transform: translateX(calc(294.387% - 48.512vw - 7.76px)) scaleX(0.8602); opacity: 0.1332; }
  5.7% { transform: translateX(calc(288.774% - 47.024vw - 7.52px)) scaleX(0.7581); opacity: 0.1136; }
  7.2% { transform: translateX(calc(283.161% - 45.536vw - 7.29px)) scaleX(0.6939); opacity: 0.1012; }
  8.7% { transform: translateX(calc(277.548% - 44.048vw - 7.05px)) scaleX(0.6674); opacity: 0.0961; }
  10.2% { transform: translateX(calc(271.935% - 42.56vw - 6.81px)) scaleX(0.6788); opacity: 0.0983; }
  11.7% { transform: translateX(calc(266.322% - 41.071vw - 6.57px)) scaleX(0.7279); opacity: 0.1078; }
  13.2% { transform: translateX(calc(260.709% - 39.583vw - 6.33px)) scaleX(0.8148); opacity: 0.1244; }
  14.7% { transform: translateX(calc(255.096% - 38.095vw - 6.1px)) scaleX(0.9395); opacity: 0.1484; }
  15.3% { transform: translateX(calc(252.85% - 37.5vw - 6px)) scaleX(1); opacity: 0.16; }
  20.7% { transform: translateX(calc(252.85% - 37.5vw - 6px)) scaleX(1); opacity: 0.16; }
  22.2% { transform: translateX(calc(247.237% - 36.012vw - 5.76px)) scaleX(0.8602); opacity: 0.1332; }
  23.7% { transform: translateX(calc(241.624% - 34.524vw - 5.52px)) scaleX(0.7581); opacity: 0.1136; }
  25.2% { transform: translateX(calc(236.011% - 33.036vw - 5.29px)) scaleX(0.6939); opacity: 0.1012; }
  26.7% { transform: translateX(calc(230.398% - 31.548vw - 5.05px)) scaleX(0.6674); opacity: 0.0961; }
  28.2% { transform: translateX(calc(224.785% - 30.06vw - 4.81px)) scaleX(0.6788); opacity: 0.0983; }
  29.7% { transform: translateX(calc(219.172% - 28.571vw - 4.57px)) scaleX(0.7279); opacity: 0.1078; }
  31.2% { transform: translateX(calc(213.559% - 27.083vw - 4.33px)) scaleX(0.8148); opacity: 0.1244; }
  32.7% { transform: translateX(calc(207.946% - 25.595vw - 4.1px)) scaleX(0.9395); opacity: 0.1484; }
  33.3% { transform: translateX(calc(205.701% - 25vw - 4px)) scaleX(1); opacity: 0.16; }
  38.7% { transform: translateX(calc(205.701% - 25vw - 4px)) scaleX(1); opacity: 0.16; }
  40.2% { transform: translateX(calc(200.088% - 23.512vw - 3.76px)) scaleX(0.8602); opacity: 0.1332; }
  41.7% { transform: translateX(calc(194.474% - 22.024vw - 3.52px)) scaleX(0.7581); opacity: 0.1136; }
  43.2% { transform: translateX(calc(188.861% - 20.536vw - 3.29px)) scaleX(0.6939); opacity: 0.1012; }
  44.7% { transform: translateX(calc(183.248% - 19.048vw - 3.05px)) scaleX(0.6674); opacity: 0.0961; }
  46.2% { transform: translateX(calc(177.635% - 17.56vw - 2.81px)) scaleX(0.6788); opacity: 0.0983; }
  47.7% { transform: translateX(calc(172.022% - 16.071vw - 2.57px)) scaleX(0.7279); opacity: 0.1078; }
  49.2% { transform: translateX(calc(166.409% - 14.583vw - 2.33px)) scaleX(0.8148); opacity: 0.1244; }
  50.7% { transform: translateX(calc(160.796% - 13.095vw - 2.1px)) scaleX(0.9395); opacity: 0.1484; }
  51.3% { transform: translateX(calc(158.551% - 12.5vw - 2px)) scaleX(1); opacity: 0.16; }
  56.7% { transform: translateX(calc(158.551% - 12.5vw - 2px)) scaleX(1); opacity: 0.16; }
  58.2% { transform: translateX(calc(152.938% - 11.012vw - 1.76px)) scaleX(0.8602); opacity: 0.1332; }
  59.7% { transform: translateX(calc(147.325% - 9.524vw - 1.52px)) scaleX(0.7581); opacity: 0.1136; }
  61.2% { transform: translateX(calc(141.712% - 8.036vw - 1.29px)) scaleX(0.6939); opacity: 0.1012; }
  62.7% { transform: translateX(calc(136.099% - 6.548vw - 1.05px)) scaleX(0.6674); opacity: 0.0961; }
  64.2% { transform: translateX(calc(130.486% - 5.06vw - 0.81px)) scaleX(0.6788); opacity: 0.0983; }
  65.7% { transform: translateX(calc(124.872% - 3.571vw - 0.57px)) scaleX(0.7279); opacity: 0.1078; }
  67.2% { transform: translateX(calc(119.259% - 2.083vw - 0.33px)) scaleX(0.8148); opacity: 0.1244; }
  68.7% { transform: translateX(calc(113.646% - 0.595vw - 0.1px)) scaleX(0.9395); opacity: 0.1484; }
  69.3% { transform: translateX(calc(111.401% + 0vw + 0px)) scaleX(1); opacity: 0.16; }
  72.1% { transform: translateX(calc(111.401% + 0vw + 0px)) scaleX(1); opacity: 0.1583; }
  75.3% { transform: translateX(calc(111.401% + 0vw + 0px)) scaleX(1); opacity: 0.1034; }
  75.5% { transform: translateX(calc(112.411% + 0vw + 0px)) scaleX(0.9784); opacity: 0.0974; }
  77.3% { transform: translateX(calc(125.4% + 0vw + 0px)) scaleX(0.717); opacity: 0.0457; }
  79% { transform: translateX(calc(137.667% + 0vw + 0px)) scaleX(0.5); opacity: 0.016; }
  81.8% { transform: translateX(calc(157.871% + 0vw + 0px)) scaleX(0.5); opacity: 0; }
  100% { transform: translateX(calc(289.198% + 0vw + 0px)) scaleX(0.5); opacity: 0; }
}

@keyframes intro-gulp {
  0% { transform: scale(1); }
  0.195% { transform: scale(1.00066); }
  0.39% { transform: scale(1.00264); }
  0.585% { transform: scale(1.00595); }
  0.78% { transform: scale(1.01058); }
  0.975% { transform: scale(1.01653); }
  1.248% { transform: scale(1.02601); }
  1.442% { transform: scale(1.03143); }
  1.637% { transform: scale(1.03553); }
  1.832% { transform: scale(1.03831); }
  2.027% { transform: scale(1.03976); }
  2.339% { transform: scale(1.03987); }
  2.807% { transform: scale(1.03854); }
  3.314% { transform: scale(1.03557); }
  3.86% { transform: scale(1.03082); }
  4.483% { transform: scale(1.02383); }
  5.38% { transform: scale(1.0119); }
  6.706% { transform: scale(0.99362); }
  7.407% { transform: scale(0.9852); }
  8.031% { transform: scale(0.97915); }
  8.616% { transform: scale(0.97499); }
  9.162% { transform: scale(0.97257); }
  9.708% { transform: scale(0.97163); }
  10.253% { transform: scale(0.97214); }
  10.838% { transform: scale(0.97418); }
  11.501% { transform: scale(0.97813); }
  12.281% { transform: scale(0.98448); }
  14.542% { transform: scale(1.00629); }
  15.361% { transform: scale(1.01279); }
  16.062% { transform: scale(1.01689); }
  16.725% { transform: scale(1.01929); }
  17.388% { transform: scale(1.02014); }
  18.051% { transform: scale(1.01949); }
  18.791% { transform: scale(1.01714); }
  19.649% { transform: scale(1.01271); }
  21.053% { transform: scale(1.00323); }
  22.378% { transform: scale(0.99434); }
  23.275% { transform: scale(0.98966); }
  24.094% { transform: scale(0.98688); }
  24.873% { transform: scale(0.98575); }
  25.692% { transform: scale(0.98617); }
  26.55% { transform: scale(0.9882); }
  27.641% { transform: scale(0.99254); }
  30.058% { transform: scale(1.00418); }
  31.111% { transform: scale(1.00791); }
  32.047% { transform: scale(1.00976); }
  32.982% { transform: scale(1.01008); }
  33.996% { transform: scale(1.00879); }
  35.244% { transform: scale(1.00542); }
  37.856% { transform: scale(0.99657); }
  39.064% { transform: scale(0.99383); }
  40.195% { transform: scale(0.99282); }
  41.365% { transform: scale(0.99341); }
  42.768% { transform: scale(0.99589); }
  45.731% { transform: scale(1.00289); }
  47.135% { transform: scale(1.00478); }
  48.46% { transform: scale(1.00501); }
  49.981% { transform: scale(1.00357); }
  53.645% { transform: scale(0.9976); }
  55.244% { transform: scale(0.99642); }
  56.881% { transform: scale(0.99683); }
  59.532% { transform: scale(0.99977); }
  61.871% { transform: scale(1.00213); }
  63.743% { transform: scale(1.00252); }
  66.082% { transform: scale(1.00114); }
  69.474% { transform: scale(0.9985); }
  71.735% { transform: scale(0.99828); }
  77.622% { transform: scale(1.0012); }
  80.39% { transform: scale(1.00096); }
  85.458% { transform: scale(0.99912); }
  89.006% { transform: scale(0.99959); }
  93.684% { transform: scale(1.00065); }
  99.961% { transform: scale(0.99963); }
  100% { transform: scale(1); }
}

@keyframes intro-face {
  0% { transform: translateY(calc(77.23% + 2px)) rotate(0deg); }
  1.538% { transform: translateY(calc(69.265% + 1.794px)) rotate(0deg); }
  3.077% { transform: translateY(calc(62.218% + 1.611px)) rotate(0deg); }
  4.615% { transform: translateY(calc(56.091% + 1.453px)) rotate(0deg); }
  6.154% { transform: translateY(calc(50.883% + 1.318px)) rotate(0deg); }
  7.692% { transform: translateY(calc(46.594% + 1.207px)) rotate(0deg); }
  9.231% { transform: translateY(calc(43.224% + 1.119px)) rotate(0deg); }
  10.769% { transform: translateY(calc(40.773% + 1.056px)) rotate(0deg); }
  12.308% { transform: translateY(calc(39.241% + 1.016px)) rotate(0deg); }
  13.846% { transform: translateY(calc(38.628% + 1px)) rotate(0deg); }
  38.718% { transform: translateY(calc(38.519% + 0.998px)) rotate(0deg); }
  39.231% { transform: translateY(calc(37.778% + 0.978px)) rotate(0deg); }
  39.872% { transform: translateY(calc(35.928% + 0.93px)) rotate(0deg); }
  40.513% { transform: translateY(calc(33.21% + 0.86px)) rotate(0deg); }
  41.282% { transform: translateY(calc(29.054% + 0.752px)) rotate(0deg); }
  42.308% { transform: translateY(calc(22.492% + 0.582px)) rotate(0deg); }
  44.487% { transform: translateY(calc(7.53% + 0.195px)) rotate(0deg); }
  45.513% { transform: translateY(calc(1.193% + 0.031px)) rotate(0deg); }
  46.41% { transform: translateY(calc(-3.548% - 0.092px)) rotate(0deg); }
  47.179% { transform: translateY(calc(-6.886% - 0.178px)) rotate(0deg); }
  47.949% { transform: translateY(calc(-9.496% - 0.246px)) rotate(0deg); }
  48.718% { transform: translateY(calc(-11.362% - 0.294px)) rotate(0deg); }
  49.487% { transform: translateY(calc(-12.503% - 0.324px)) rotate(0deg); }
  50.385% { transform: translateY(calc(-12.981% - 0.336px)) rotate(0deg); }
  51.282% { transform: translateY(calc(-12.647% - 0.328px)) rotate(0deg); }
  52.308% { transform: translateY(calc(-11.454% - 0.297px)) rotate(0deg); }
  53.718% { transform: translateY(calc(-8.821% - 0.228px)) rotate(0deg); }
  55.641% { transform: translateY(calc(-4.407% - 0.114px)) rotate(-0.09deg); }
  56.667% { transform: translateY(calc(-2.093% - 0.054px)) rotate(-0.85deg); }
  57.692% { transform: translateY(calc(-0.02% - 0.001px)) rotate(-2.37deg); }
  58.846% { transform: translateY(calc(1.889% + 0.049px)) rotate(-4.48deg); }
  59.872% { transform: translateY(calc(3.137% + 0.081px)) rotate(-5.62deg); }
  60.897% { transform: translateY(calc(3.943% + 0.102px)) rotate(-6deg); }
  61.923% { transform: translateY(calc(4.322% + 0.112px)) rotate(-5.61deg); }
  62.949% { transform: translateY(calc(4.319% + 0.112px)) rotate(-4.44deg); }
  63.974% { transform: translateY(calc(3.999% + 0.104px)) rotate(-2.48deg); }
  65.641% { transform: translateY(calc(3.005% + 0.078px)) rotate(1.77deg); }
  66.667% { transform: translateY(calc(2.231% + 0.058px)) rotate(3.63deg); }
  67.692% { transform: translateY(calc(1.425% + 0.037px)) rotate(4.7deg); }
  68.718% { transform: translateY(calc(0.651% + 0.017px)) rotate(5deg); }
  70.128% { transform: translateY(calc(-0.268% - 0.007px)) rotate(4.52deg); }
  71.538% { transform: translateY(calc(-0.943% - 0.024px)) rotate(3.25deg); }
  73.205% { transform: translateY(calc(-1.382% - 0.036px)) rotate(1.19deg); }
  74.615% { transform: translateY(calc(-1.465% - 0.038px)) rotate(0.21deg); }
  76.154% { transform: translateY(calc(-1.313% - 0.034px)) rotate(0deg); }
  83.718% { transform: translateY(calc(0.342% + 0.009px)) rotate(0deg); }
  88.59% { transform: translateY(calc(0.414% + 0.011px)) rotate(0deg); }
  98.205% { transform: translateY(calc(-0.166% - 0.004px)) rotate(0deg); }
  99.872% { transform: translateY(calc(-0.153% - 0.004px)) rotate(0deg); }
  100% { transform: translateY(calc(0% + 0px)) rotate(0deg); }
}

/* ===== ハロウィン（2026-10-30・10-31 の日本時間だけ。hosting/halloween.js が html.halloween を付ける。hosting/scripts/halloween-css.mjs） ===== */
/* 部品はほかの日（と印刷）は出さない（このファイルを読むのはトップページだけ。hosting/styles.css は変えない） */
.hw-sky,
.hw-wordmark,
.hw-glow,
.hw-wolf,
.hw-deco,
.hw-tagline {
  display: none;
}

@media screen {
  /* ヒーローだけ夜空にする（ほかの欄は変えない） */
  html.halloween .is-home ~ main > .hero {
    --st-bg: #170f24;
    --st-fg: #f6f0ff;
    --text-secondary: #f6f0ff;
    position: relative;
    /* スタンプを出さないので、狭い画面でもスタンプの分の下の余白（184px）は取らない（お城の分だけ） */
    padding-bottom: clamp(120px, 30vw, 180px);
    background: radial-gradient(120% 70% at 80% 8%, #3b2557 0%, #24163a 40%, #170f24 75%);
    color: #f6f0ff;
  }

  /* 網点とおおかみ・うさぎのスタンプは出さない（月・星・コウモリ・お城に替える） */
  html.halloween .is-home ~ main > .hero::before,
  html.halloween .is-home ~ main > .hero::after,
  html.halloween .is-home ~ main > .hero > .hero-note:last-child::before {
    display: none;
  }

  html.halloween .is-home ~ main .hero-lead,
  html.halloween .is-home ~ main .hero-note {
    color: #f6f0ff;
  }

  /* ストアのカードは白地のまま（文字は黒） */
  html.halloween .is-home ~ main .store-soon > li {
    color: var(--st-ink);
  }

  /* 夜空の飾り（月・星・コウモリ・お城。中身の後ろ） */
  html.halloween .hw-sky {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }

  /* 月は右上の端（ロゴに重ならないよう、ロゴより上） */
  html.halloween .hw-moon {
    position: absolute;
    top: 8px;
    right: 5%;
    width: clamp(36px, 5.5vw, 88px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff9d9, #ffe08a 60%, #f3c654);
    box-shadow: 0 0 40px 10px rgba(255, 216, 120, 0.25);
  }

  html.halloween .hw-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.7;
  }

  html.halloween .hw-star-1 { left: 6%; top: 9%; }
  html.halloween .hw-star-2 { left: 18%; top: 22%; }
  html.halloween .hw-star-3 { left: 10%; top: 34%; }
  html.halloween .hw-star-4 { left: 32%; top: 16%; }
  html.halloween .hw-star-5 { left: 27%; top: 7%; }
  html.halloween .hw-star-6 { left: 62%; top: 11%; }
  html.halloween .hw-star-7 { left: 74%; top: 27%; }
  html.halloween .hw-star-8 { left: 86%; top: 40%; }
  html.halloween .hw-star-9 { left: 48%; top: 5%; }
  html.halloween .hw-star-10 { left: 92%; top: 18%; }
  html.halloween .hw-star-11 { left: 4%; top: 52%; }
  html.halloween .hw-star-12 { left: 95%; top: 60%; }

  /* コウモリ（幅いっぱいの箱を横に動かし、中の絵は左端に置く。動かないときは途中の位置で止める） */
  html.halloween .hw-bat {
    position: absolute;
    left: 0;
    width: 100%;
  }

  html.halloween .hw-bat-bob {
    display: block;
  }

  html.halloween .hw-bat svg {
    display: block;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 2px rgba(190, 150, 255, 0.55));
  }

  html.halloween .hw-bat-1 { top: 14%; transform: translateX(16%); }
  html.halloween .hw-bat-1 svg { width: 44px; }
  html.halloween .hw-bat-2 { top: 72%; transform: translateX(78%); }
  html.halloween .hw-bat-2 svg { width: 26px; }
  html.halloween .hw-bat-3 { top: 36%; transform: translateX(86%); }
  html.halloween .hw-bat-3 svg { width: 22px; transform: scaleX(-1); }

  html.halloween .hw-wing,
  html.halloween .hw-bat-body {
    fill: #0d0716;
  }

  html.halloween .hw-bat-eye {
    fill: #ffcf4a;
  }

  html.halloween .hw-wing {
    transform-box: view-box;
  }

  html.halloween .hw-wing-l {
    transform-origin: 46px 20px;
  }

  html.halloween .hw-wing-r {
    transform-origin: 54px 20px;
  }

  /* 下の黒いお城（プレビューの .castle。広い画面で大きくなりすぎないよう高さで決めて真ん中に置く。丘は横に伸ばしてあり、左右の端まで続く） */
  html.halloween .hw-castle {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: clamp(110px, 30vw, 170px);
    overflow: visible;
  }

  html.halloween .hw-castle-body { fill: #06030b; }
  html.halloween .hw-castle-gate { fill: #000000; }
  html.halloween .hw-castle-win rect { fill: #ffd45c; opacity: 0.95; }

  /* ロゴ: 部品をずっと出したまま（最後の絵はふつうのロゴではなく、白いロゴ・灯り・赤い狼・帽子）。読み上げはふつうのロゴの alt のまま */
  html.halloween .intro-parts {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 2950 / 690;
    pointer-events: none;
  }

  html.halloween .intro-still {
    clip-path: inset(0 0 100% 0);
  }

  html.halloween .intro-logo {
    position: absolute;
    inset: 0;
    transform-origin: 40.704% 49.752%;
  }

  html.halloween .intro .intro-wordmark {
    display: none;
  }

  /* ワードマーク（O を塗りつぶした形）を #f6f0ff で塗る */
  html.halloween .hw-wordmark {
    display: block;
    position: absolute;
    inset: 0;
    background: #f6f0ff;
    -webkit-mask: url('/assets/intro/wordmark-empty-o.png') 0 0 / 100% 100% no-repeat;
    mask: url('/assets/intro/wordmark-empty-o.png') 0 0 / 100% 100% no-repeat;
  }

  html.halloween .intro-o {
    position: absolute;
    inset: 0;
    clip-path: ellipse(10.936% 46.754% at 40.704% 49.752%);
  }

  /* O の中は灯りの色（狼の顔の目と鼻の穴から光って、ジャック・オー・ランタンに見える） */
  html.halloween .hw-glow {
    display: block;
    position: absolute;
    inset: 0;
    background: radial-gradient(10% 40% at 40.7% 56%, #fff3b8 0%, #ffd45c 55%, #ff9d2e 100%);
  }

  html.halloween .intro .intro-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 40.339% 55.797%;
  }

  /* 白いうさぎの顔（耳だけのぞく）。最後は O の下に隠れている */
  html.halloween .intro img.intro-face {
    transform: translateY(calc(77.23% + 2px));
  }

  html.halloween .intro .hw-wolf {
    display: block;
  }

  /* 赤い狼の顔（元のロゴの O の中の顔と同じ位置） */
  html.halloween .hw-wolf-face {
    position: absolute;
    left: 31.7%;
    top: 19%;
    width: 18%;
    height: 77%;
    background: #e0262b;
    -webkit-mask: url('/assets/intro/wolf-face.png') 0 0 / 100% 100% no-repeat;
    mask: url('/assets/intro/wolf-face.png') 0 0 / 100% 100% no-repeat;
  }

  /* 跳ねるうさぎと影は、動くときだけ */
  html.halloween .intro .intro-runner,
  html.halloween .intro-shadow {
    display: none;
  }

  /* ロゴの上の飾り（帽子・煙・「！？」。ロゴと一緒には揺れない） */
  html.halloween .hw-deco {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }

  /* 魔女の帽子（狼の頭の上） */
  html.halloween .hw-hat {
    position: absolute;
    left: 30.6%;
    top: -53%;
    width: 21%;
    height: auto;
    transform-origin: 50% 100%;
    transform: rotate(-12deg);
    /* 夜空に溶けないよう、コウモリと同じうすい紫の光（プレビューの .night .hat） */
    filter: drop-shadow(0 0 2px rgba(190, 150, 255, 0.55));
  }

  html.halloween .hw-commotion {
    display: none;
  }

  /* 一言（ロゴのすぐ下。いつものキャッチコピーはそのまま） */
  html.halloween .hw-tagline {
    display: block;
    margin: 28px 0 0;
    color: #ffb46b;
    font-size: clamp(20px, 4.6vw, 30px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  html.halloween .hw-tagline-sub {
    display: block;
    font-size: clamp(14px, 3.4vw, 19px);
    font-weight: 500;
    opacity: 0.85;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* 跳ねてくるのは白いうさぎ（ほんのり光る） */
  html.halloween .intro .intro-runner {
    display: block;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
  }

  html.halloween .intro-shadow {
    display: block;
    background: rgba(0, 0, 0, 0.55);
  }

  /* 部品は最後まで消さない（いつもの intro-parts の代わりにガタガタ揺れる）。ふつうのロゴは出さない */
  html.halloween .intro-parts {
    transform-origin: 40.7% 60%;
    animation: hw-rattle 1250ms linear 2850ms both;
  }

  html.halloween .intro-still {
    animation: none;
  }

  /* 飛び込んだうさぎの耳がのぞいて、ぴくぴくして、引っ込められる */
  html.halloween .intro img.intro-face {
    animation: hw-ears 760ms linear 2150ms both;
  }

  /* 狼の顔はドタバタが落ち着いてから（動きはいつものうさぎの顔と同じ intro-face） */
  html.halloween .intro .hw-wolf {
    animation-delay: 4150ms;
  }

  html.halloween .hw-commotion {
    display: block;
    position: absolute;
    inset: 0;
  }

  html.halloween .hw-puff {
    position: absolute;
    width: 11%;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    animation: hw-puff 520ms ease-out both;
  }

  html.halloween .hw-puff svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
  }

  html.halloween .hw-puff-1 { left: 24%; top: -18%; animation-delay: 2900ms; }
  html.halloween .hw-puff-2 { left: 50%; top: -30%; animation-delay: 3150ms; }
  html.halloween .hw-puff-3 { left: 53%; top: 55%; animation-delay: 3400ms; }
  html.halloween .hw-puff-4 { left: 22%; top: 50%; animation-delay: 3600ms; }

  html.halloween .hw-bang {
    position: absolute;
    color: #ffb46b;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    animation: hw-bang 600ms ease-out both;
  }

  html.halloween .hw-bang-1 { left: 52%; top: -62%; font-size: min(8vw, 50px); animation-delay: 3050ms; }
  html.halloween .hw-bang-2 { left: 25%; top: -48%; font-size: min(6.5vw, 41px); animation-delay: 3500ms; }

  html.halloween .hw-hat {
    animation: hw-hat 700ms cubic-bezier(0.3, 1.4, 0.5, 1) 5200ms both;
  }

  html.halloween .hw-tagline {
    animation: hw-fade 500ms 5000ms both;
  }

  /* お城の窓の灯りがゆらぐ（プレビューの flicker。3つの時差） */
  html.halloween .hw-castle-win rect {
    animation: hw-flicker 2.6s ease-in-out infinite;
  }

  html.halloween .hw-castle-win .hw-w2 { animation-delay: -0.9s; }
  html.halloween .hw-castle-win .hw-w3 { animation-delay: -1.7s; }

  html.halloween .hw-star {
    animation: hw-twinkle 2.4s ease-in-out infinite;
  }

  html.halloween .hw-star-2, html.halloween .hw-star-7 { animation-delay: 0.6s; }
  html.halloween .hw-star-3, html.halloween .hw-star-8, html.halloween .hw-star-12 { animation-delay: 1.2s; }
  html.halloween .hw-star-4, html.halloween .hw-star-9 { animation-delay: 0.3s; }
  html.halloween .hw-star-5, html.halloween .hw-star-10 { animation-delay: 1.8s; }

  /* コウモリ: 波のように飛び、羽ばたきに合わせて体が上下する（1匹は右から左） */
  html.halloween .hw-bat {
    animation: hw-fly 7s linear infinite;
  }

  html.halloween .hw-bat-2 { animation-duration: 8s; animation-delay: -3s; }
  html.halloween .hw-bat-3 { animation-name: hw-fly-rev; animation-duration: 9s; animation-delay: -5s; }

  @media (min-width: 720px) {
    html.halloween .hw-bat-1 { animation-duration: 13s; }
    html.halloween .hw-bat-2 { animation-duration: 15s; animation-delay: -6s; }
    html.halloween .hw-bat-3 { animation-duration: 17s; animation-delay: -9s; }
  }

  html.halloween .hw-bat-bob {
    animation: hw-bob 1.6s ease-in-out infinite alternate;
  }

  html.halloween .hw-wing-l {
    animation: hw-flap-l 260ms ease-in-out infinite alternate;
  }

  html.halloween .hw-wing-r {
    animation: hw-flap-r 260ms ease-in-out infinite alternate;
  }
}

@keyframes hw-ears {
  0% { transform: translateY(calc(77.23% + 2px)) rotate(0deg); }
  35% { transform: translateY(54%) rotate(0deg); }
  55% { transform: translateY(52%) rotate(-7deg); }
  68% { transform: translateY(53%) rotate(6deg); }
  76% { transform: translateY(51%) rotate(0deg); }
  86% { transform: translateY(calc(77.23% + 2px)) rotate(0deg); }
  100% { transform: translateY(calc(77.23% + 2px)) rotate(0deg); }
}

@keyframes hw-rattle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  8% { transform: translate(-1.2%, 2%) rotate(-2deg); }
  16% { transform: translate(1.4%, -3%) rotate(2.5deg); }
  24% { transform: translate(-0.8%, 1%) rotate(-1.5deg); }
  32% { transform: translate(0, 0) rotate(0deg); }
  46% { transform: translate(1.2%, 2%) rotate(2deg); }
  54% { transform: translate(-1.4%, -2%) rotate(-2.5deg); }
  62% { transform: translate(0.6%, 1%) rotate(1deg); }
  70% { transform: translate(0, 0) rotate(0deg); }
  80% { transform: translate(-0.6%, -1%) rotate(-1deg); }
  88% { transform: translate(0.4%, 0.5%) rotate(0.6deg); }
}

@keyframes hw-puff {
  0% { opacity: 0; transform: scale(0.3) translateY(0); }
  30% { opacity: 0.9; transform: scale(1) translateY(-10%); }
  100% { opacity: 0; transform: scale(1.35) translateY(-40%); }
}

@keyframes hw-bang {
  0% { opacity: 0; transform: scale(0.4) rotate(-10deg); }
  25% { opacity: 1; transform: scale(1.15) rotate(6deg); }
  45% { transform: scale(1) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1) translateY(-20%); }
}

@keyframes hw-hat {
  0% { transform: translateY(-260%) rotate(-25deg); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(0) rotate(-12deg); opacity: 1; }
}

@keyframes hw-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hw-flicker {
  0%, 100% { opacity: 0.95; }
  40% { opacity: 0.6; }
  55% { opacity: 1; }
  70% { opacity: 0.75; }
}

@keyframes hw-twinkle {
  50% { opacity: 0.15; }
}

@keyframes hw-fly {
  0% { transform: translate(-60px, 0); }
  50% { transform: translate(48%, -22px); }
  100% { transform: translate(calc(100% + 20px), 8px); }
}

@keyframes hw-fly-rev {
  0% { transform: translate(calc(100% + 20px), 0); }
  50% { transform: translate(46%, 16px); }
  100% { transform: translate(-60px, -10px); }
}

@keyframes hw-bob {
  from { transform: translateY(-7px) rotate(-4deg); }
  to { transform: translateY(7px) rotate(5deg); }
}

@keyframes hw-flap-l {
  from { transform: rotate(-28deg) scaleY(0.9); }
  to { transform: rotate(32deg) scaleY(1.05); }
}

@keyframes hw-flap-r {
  from { transform: rotate(28deg) scaleY(0.9); }
  to { transform: rotate(-32deg) scaleY(1.05); }
}