/* BeEnglish : qu'on sente le Royaume-Uni (culture.js). Propre à cette page ; la mécanique commune est dans vie.css (« la culture »).
   Hors de l'écran, les animations s'arrêtent (vie-pause) ; en mode calme, elles sont plus lentes et plus douces. */

/* ------------------------------------------------------------------ la pluie fine, dans le haut de l'écran */
.cult-pluie { position: fixed; left: 0; right: 0; top: 0; z-index: 14; height: 52vh; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden;
  -webkit-mask: linear-gradient(180deg, #000, #000 35%, transparent); mask: linear-gradient(180deg, #000, #000 35%, transparent);
  transition: opacity 2s ease, visibility 0s 2s; }
.cult-pluie.tombe { opacity: 1; visibility: visible; transition: opacity 1.4s ease; }
.cult-pluie.vite { transition: opacity .35s ease, visibility 0s .35s; }
.cult-gouttes { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 160px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160'%3E%3Cg stroke='%235E769C' stroke-width='1.4' stroke-linecap='round' opacity='.7'%3E%3Cpath d='M14 8l-2 13M58 40l-2 13M96 18l-2 13M34 92l-2 13M80 108l-2 13M110 74l-2 13M6 132l-2 13M50 140l-2 13'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 160px;
  animation: cult-pluie .62s linear infinite; animation-play-state: paused; }
.cult-gouttes.g2 { left: -40px; height: calc(100% + 120px); background-size: 90px 120px; opacity: .55; animation-name: cult-pluie2; animation-duration: .9s; }
.cult-pluie.tombe .cult-gouttes { animation-play-state: running; }
@keyframes cult-pluie { from { transform: translateY(-160px); } to { transform: translateY(0); } }
@keyframes cult-pluie2 { from { transform: translateY(-120px); } to { transform: translateY(0); } }

/* ------------------------------------------------------------------ la rue anglaise */
.cult-rue { position: absolute; left: 0; bottom: 0; width: 100%; height: 72px; opacity: .92; }
.cult-brume { position: absolute; bottom: 6px; left: var(--x); width: 240px; height: 70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,233,239,.78), rgba(232,233,239,0)); animation: cult-brume var(--d, 30s) ease-in-out var(--r, 0s) infinite alternate; }
@keyframes cult-brume { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
.cult-bus { width: 74px; }
.cult-bus svg { display: block; width: 100%; height: auto; }
.cult-bus-corps { animation: cult-cahot .5s ease-in-out infinite alternate; }
@keyframes cult-cahot { from { transform: translateY(0); } to { transform: translateY(-1px); } }
.cult-piste .cult-bus { bottom: 1px; }
@media (max-width: 900px) {
  .cult-rue { height: 60px; }
  .cult-bus { width: 62px; }
  .cult-brume { width: 180px; height: 56px; }
}

/* ------------------------------------------------------------------ les fanions au-dessus des grands titres */
.cult-fanions { display: block; width: min(300px, 78%); margin: 0 auto 14px; line-height: 0; }
.cult-fanions { --amp: 7deg; }
.cult-fanions i { display: block; width: 100%; aspect-ratio: 320 / 34; background: no-repeat 50% 0 / 100% auto; transform-origin: 50% 0; }
.cult-fanions.balance i { animation: cult-balance 1.4s ease-out; }
@keyframes cult-balance { 0% { transform: skewX(0); } 14% { transform: skewX(calc(var(--sens, 1) * -1 * var(--amp))); } 34% { transform: skewX(calc(var(--sens, 1) * .6 * var(--amp))); }
  54% { transform: skewX(calc(var(--sens, 1) * -.32 * var(--amp))); } 76% { transform: skewX(calc(var(--sens, 1) * .12 * var(--amp))); } 100% { transform: skewX(0); } }

/* ------------------------------------------------------------------ l'arc-en-ciel du combat */
.cult-arc { position: absolute; left: 4%; right: 4%; top: 3%; z-index: 0; aspect-ratio: 200 / 106; pointer-events: none; opacity: 0; transform: scale(.92); transform-origin: 50% 100%;
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.3,1.2,.5,1); }
.cult-arc svg { position: relative; display: block; width: 100%; height: 100%; opacity: .62; }
.cult-arc path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.7,.4,1) calc(var(--i) * 70ms); }
.cult-arc.montre { opacity: 1; transform: none; }
.cult-arc.montre path { stroke-dashoffset: 0; }
.cult-soleil { position: absolute; left: 10%; right: 10%; top: 10%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,238,170,.55), rgba(255,238,170,0)); }

/* ------------------------------------------------------------------ le thé du dragon, au stade « 3 jours » */
.cult-the { position: absolute; left: 3%; bottom: 3%; z-index: 3; width: 27%; aspect-ratio: 60 / 44; pointer-events: none; opacity: 0; transform: translateY(10px) scale(.7);
  transition: opacity .4s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.cult-the svg { display: block; width: 100%; height: 100%; }
.frise[data-stade="2"] .cult-the { opacity: 1; transform: none; transition-delay: .25s; }
.cult-fumee { position: absolute; left: 40%; bottom: 70%; width: 18%; aspect-ratio: 1 / 2.2; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); animation: cult-fumee 2.6s ease-out infinite; }
.cult-fumee.f2 { left: 52%; animation-delay: -.9s; } .cult-fumee.f3 { left: 30%; animation-delay: -1.7s; }
@keyframes cult-fumee { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-70%) scale(1.2); opacity: 0; } }

/* ------------------------------------------------------------------ le sablier en tasses de thé, à côté du compteur */
.cult-sablier { display: inline-block; width: 22px; height: 32px; line-height: 0; }
.cult-sablier svg { display: block; width: 100%; height: 100%; animation: cult-sablier 7s ease-in-out infinite; }
.cult-the-h { transform-box: fill-box; transform-origin: 50% 100%; animation: cult-vide 7s linear infinite; }
.cult-the-b { transform-box: fill-box; transform-origin: 50% 100%; animation: cult-remplit 7s linear infinite; }
.cult-filet { animation: cult-filet 7s linear infinite; }
@keyframes cult-sablier { 0%, 84% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
@keyframes cult-vide { 0% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } }
@keyframes cult-remplit { 0% { transform: scaleY(0); } 80%, 100% { transform: scaleY(1); } }
@keyframes cult-filet { 0%, 78% { opacity: 1; } 80%, 100% { opacity: 0; } }

/* ------------------------------------------------------------------ le pied de page */
.cult-feu-phare { animation: cult-phare 3s ease-in-out infinite; }
.cult-faisceau { opacity: 0; animation: cult-faisceau 3s ease-in-out infinite; }
@keyframes cult-phare { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes cult-faisceau { 0%, 30%, 100% { opacity: 0; } 50% { opacity: .55; } 70% { opacity: 0; } }

/* hors de l'écran : plus d'animation du tout (pas seulement en pause) */
.vie-pause .cult-brume, .vie-pause .cult-bus-corps, .vie-pause .cult-fumee, .vie-pause .cult-sablier svg, .vie-pause .cult-the-h, .vie-pause .cult-the-b,
.vie-pause .cult-filet, .vie-pause .cult-feu-phare, .vie-pause .cult-faisceau { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cult-brume { animation-duration: 60s; }
  .cult-fanions { --amp: 3deg; }
  .cult-gouttes { animation-duration: 1.3s; } .cult-gouttes.g2 { animation-duration: 1.8s; }
  .cult-bus-corps { animation: none; }
  .cult-sablier svg, .cult-the-h, .cult-the-b, .cult-filet { animation-duration: 12s; }
  .cult-fumee { animation-duration: 4.5s; }
}