/* Immersion commune aux pages éditoriales de l'univers Cabane. */
.brand .lv-mark,
.foot-brand .lv-mark {
  color: #efc897;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .18));
}

.brand .lv-wordmark {
  color: #fff;
}

.foot-brand .lv-wordmark {
  color: inherit;
}

.hero .forest-leaves {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.hero .forest-leaf {
  --leaf-x: 8%;
  --leaf-size: 11px;
  --leaf-delay: .2s;
  --leaf-duration: 7.8s;
  --leaf-mid: 34px;
  --leaf-end: -18px;
  position: absolute;
  top: -12%;
  left: var(--leaf-x);
  width: var(--leaf-size);
  aspect-ratio: .72;
  border-radius: 90% 0 90% 0;
  background: linear-gradient(135deg, #d2b26c, #6b4b2a);
  box-shadow: inset -1px -1px 2px rgba(50, 34, 18, .24);
  opacity: 0;
  transform-origin: 55% 90%;
  animation: cabane-leaf-fall var(--leaf-duration) cubic-bezier(.35, .02, .65, .98) var(--leaf-delay) 1 both;
}

.hero .forest-leaf::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 49%;
  width: 1px;
  background: rgba(68, 50, 24, .35);
  transform: rotate(18deg);
  transform-origin: bottom;
}

.hero .forest-leaf:nth-child(2) { --leaf-x: 17%; --leaf-size: 8px; --leaf-delay: 2.3s; --leaf-duration: 8.7s; --leaf-mid: -38px; --leaf-end: 22px; background: linear-gradient(135deg, #b7bf75, #587047); }
.hero .forest-leaf:nth-child(3) { --leaf-x: 26%; --leaf-size: 15px; --leaf-delay: 1.1s; --leaf-duration: 10.2s; --leaf-mid: 52px; --leaf-end: -28px; filter: blur(.4px); }
.hero .forest-leaf:nth-child(4) { --leaf-x: 36%; --leaf-size: 9px; --leaf-delay: 4.4s; --leaf-duration: 7.4s; --leaf-mid: -29px; --leaf-end: 38px; background: linear-gradient(135deg, #d6b770, #7c5630); }
.hero .forest-leaf:nth-child(5) { --leaf-x: 45%; --leaf-size: 7px; --leaf-delay: .7s; --leaf-duration: 8.9s; --leaf-mid: 31px; --leaf-end: -42px; background: linear-gradient(135deg, #c7ca87, #65754a); }
.hero .forest-leaf:nth-child(6) { --leaf-x: 54%; --leaf-size: 13px; --leaf-delay: 3.2s; --leaf-duration: 10.6s; --leaf-mid: -55px; --leaf-end: 27px; }
.hero .forest-leaf:nth-child(7) { --leaf-x: 63%; --leaf-size: 8px; --leaf-delay: 1.8s; --leaf-duration: 7.6s; --leaf-mid: 43px; --leaf-end: -16px; background: linear-gradient(135deg, #a9b66a, #536744); }
.hero .forest-leaf:nth-child(8) { --leaf-x: 72%; --leaf-size: 16px; --leaf-delay: 5.1s; --leaf-duration: 9.8s; --leaf-mid: -36px; --leaf-end: 48px; filter: blur(.7px); }
.hero .forest-leaf:nth-child(9) { --leaf-x: 81%; --leaf-size: 10px; --leaf-delay: 2.7s; --leaf-duration: 8.2s; --leaf-mid: 56px; --leaf-end: -35px; background: linear-gradient(135deg, #c8a963, #72502c); }
.hero .forest-leaf:nth-child(10) { --leaf-x: 89%; --leaf-size: 7px; --leaf-delay: .4s; --leaf-duration: 9.5s; --leaf-mid: -44px; --leaf-end: 19px; background: linear-gradient(135deg, #bac37d, #63734c); }
.hero .forest-leaf:nth-child(11) { --leaf-x: 95%; --leaf-size: 13px; --leaf-delay: 3.8s; --leaf-duration: 7.9s; --leaf-mid: -62px; --leaf-end: -24px; }
.hero .forest-leaf:nth-child(12) { --leaf-x: 3%; --leaf-size: 9px; --leaf-delay: 5.8s; --leaf-duration: 8.6s; --leaf-mid: 67px; --leaf-end: 31px; background: linear-gradient(135deg, #aebc72, #526940); }

@keyframes cabane-leaf-fall {
  0% { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0); }
  10% { opacity: .58; }
  52% { opacity: .42; transform: translate3d(var(--leaf-mid), 56vh, 0) rotate(250deg); }
  88% { opacity: .3; }
  100% { opacity: 0; transform: translate3d(var(--leaf-end), 116vh, 0) rotate(520deg); }
}

.search-card {
  position: relative;
  isolation: isolate;
  animation: cabane-search-surface .64s cubic-bezier(.18, .82, .28, 1) .18s both;
}

.search-card > :not(.search-build-frame) {
  position: relative;
  z-index: 3;
}

.search-build-frame {
  position: absolute;
  inset: -5px;
  z-index: 2;
  pointer-events: none;
}

.wood-beam {
  position: absolute;
  display: block;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.2), transparent 14% 80%, rgba(49,25,9,.18)),
    linear-gradient(180deg, #6c4020, #b87942 32%, #87512a 68%, #bd8249);
  border: 1px solid rgba(68, 35, 14, .5);
  box-shadow: 0 5px 13px rgba(20, 12, 6, .28), inset 0 1px rgba(255,255,255,.2);
}

.wood-beam-top,
.wood-beam-bottom {
  right: 18px;
  left: 18px;
  height: 7px;
  border-radius: 999px;
}

.wood-beam-left,
.wood-beam-right {
  top: 18px;
  bottom: 18px;
  width: 7px;
  border-radius: 999px;
}

.wood-beam-top { top: 0; transform: translate3d(-54%, -18px, 0) rotate(-1.5deg); animation: cabane-beam-set .58s cubic-bezier(.18,.82,.28,1) .28s forwards; }
.wood-beam-right { right: 0; transform: translate3d(20px, -45%, 0) rotate(1.6deg); animation: cabane-beam-set .56s cubic-bezier(.18,.82,.28,1) .48s forwards; }
.wood-beam-bottom { bottom: 0; transform: translate3d(54%, 18px, 0) rotate(1.2deg); animation: cabane-beam-set .58s cubic-bezier(.18,.82,.28,1) .62s forwards; }
.wood-beam-left { left: 0; transform: translate3d(-20px, 45%, 0) rotate(-1.6deg); animation: cabane-beam-set .56s cubic-bezier(.18,.82,.28,1) .76s forwards; }

.search-card > .search-field,
.search-card > .search-submit {
  opacity: 0;
  animation: cabane-search-piece .42s cubic-bezier(.18,.82,.28,1) forwards;
}

.search-card > .search-field:nth-child(2) { transform: translate3d(-20px, 6px, 0); animation-delay: .78s; }
.search-card > .search-field:nth-child(3) { transform: translate3d(0, -14px, 0); animation-delay: .88s; }
.search-card > .search-field:nth-child(4) { transform: translate3d(0, 14px, 0); animation-delay: .98s; }
.search-card > .search-field:nth-child(5) { transform: translate3d(18px, 5px, 0); animation-delay: 1.08s; }
.search-card > .search-submit { transform: translate3d(22px, 0, 0); animation-delay: 1.18s; }

@keyframes cabane-search-surface {
  from { opacity: 0; transform: perspective(800px) rotateX(-7deg) scaleX(.84); }
  to { opacity: 1; transform: perspective(800px) rotateX(0) scaleX(1); }
}

@keyframes cabane-beam-set {
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes cabane-search-piece {
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@media (max-width: 680px) {
  .hero .forest-leaf:nth-child(n+9) { display: none; }
  .search-build-frame { inset: -4px; }
  .wood-beam-top,
  .wood-beam-bottom { right: 11px; left: 11px; }
  .wood-beam-left,
  .wood-beam-right { top: 11px; bottom: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-mark,
  .lv-mark path,
  .lv-mark circle,
  .hero .forest-leaf,
  .search-card,
  .wood-beam,
  .search-card > .search-field,
  .search-card > .search-submit {
    animation: none !important;
  }

  .hero .forest-leaf { display: none; }
  .search-card,
  .wood-beam,
  .search-card > .search-field,
  .search-card > .search-submit {
    opacity: 1;
    transform: none;
  }
}
