/* Tomteluvan som landar på första "1" i logotypen och leder till #julbord.
   Positioneras av julhatt.js utifrån hero-videons ruta (--vx, --vy, --vw, --vh). */
.hero { position: relative; }
/* Menyn ligger alltid överst, även när luvan faller förbi */
.nav_component { position: relative; z-index: 4; }

.julhatt {
  --hat-red: #c4402f;
  --hat-red-dark: #8f2b22;
  --ink: #d8b645;
  /* --hw (luvans bredd) sätts av julhatt.js så att luvan aldrig hamnar över menyn */
  position: absolute;
  z-index: 3;
  /* --ax/--ay: toppen av logons översta vänstra tecken, andel av videons bredd/höjd */
  left: calc(var(--vx) + var(--vw) * var(--ax) - var(--hw) / 2);
  top: calc(var(--vy) + var(--vh) * var(--ay) - var(--hw) * 0.85 * 0.87 + var(--hw) * 0.08);
  width: var(--hw);
  aspect-ratio: 200 / 170;
  display: block;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
}
.julhatt.is-placed { visibility: visible; }
.julhatt:focus { outline: none; }
.julhatt:focus-visible .julhatt__hat > svg { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 8px; }

.julhatt__drop, .julhatt__hat { position: absolute; inset: 0; }
.julhatt__hat { transform-origin: 50% 87%; rotate: -14deg; transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1), translate .35s cubic-bezier(.3, 1.6, .5, 1); }
.julhatt__hat > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Skylten sitter bakom luvans topp och sticker fram uppåt till höger */
.julhatt__hat { isolation: isolate; }
.julhatt__hat > svg { position: relative; z-index: 1; }
.julhatt__tag {
  position: absolute;
  z-index: 0;
  left: 70%;
  bottom: 55%;
  transform-origin: 0% 100%;
  rotate: 20deg;
}
/* Skylten är tryckt i två färger som logotypen: gul platta, burgunderröd text och förskjuten skugga */
.julhatt__sign { display: block; width: calc(var(--hw) * 0.9); min-width: 84px; max-width: none; height: auto; overflow: visible; }
.julhatt__sign text { font-family: var(--_typography---font-family-primary, Karrik, Arial, sans-serif); letter-spacing: .02em; }

.julhatt__flake { position: absolute; z-index: 1; left: 50%; top: 82%; width: 13%; aspect-ratio: 1; margin: -7% 0 0 -7%; opacity: 0; pointer-events: none; }
.julhatt__flake svg { display: block; width: 100%; height: 100%; }

/* ---- Rörelse ----
   Landningen körs en gång (.is-placed utan .is-landed). Sedan står allt still i
   viloläget, och hopp och hover vickar bara – skylten kan aldrig hamna gömd. */
@media (prefers-reduced-motion: no-preference) {
  .julhatt.is-placed:not(.is-landed) .julhatt__drop { animation: julhatt-drop 1.05s .7s both; }
  .julhatt.is-placed:not(.is-landed) .julhatt__hat { animation: julhatt-squash .6s 1.25s both; }
  .julhatt.is-placed:not(.is-landed) .julhatt__tag { animation: julhatt-peek .7s 1.45s both; }
  .julhatt.is-placed:not(.is-landed) .julhatt__flake { animation: julhatt-flake .9s 1.25s cubic-bezier(.2, .7, .3, 1) both; }

  .julhatt.is-landed.is-hop .julhatt__drop { animation: julhatt-hop .7s; }
  .julhatt.is-landed.is-hop .julhatt__tag { animation: julhatt-wobble .8s .1s; }

  .julhatt.is-landed:hover .julhatt__hat, .julhatt.is-landed:focus-visible .julhatt__hat { rotate: -24deg; translate: 0 -10%; }
  .julhatt.is-landed:hover .julhatt__tag { animation: julhatt-wobble .8s; }
}

@keyframes julhatt-drop {
  0%   { translate: 0 -140vh; rotate: 30deg; animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  52%  { translate: 0 0; rotate: -4deg; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  70%  { translate: 0 -16%; rotate: 3deg; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  84%  { translate: 0 0; rotate: -1deg; animation-timing-function: ease-out; }
  92%  { translate: 0 -4%; rotate: 0deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes julhatt-squash {
  0%   { scale: 1.18 .78; }
  30%  { scale: .92 1.1; }
  55%  { scale: 1.05 .96; }
  100% { scale: 1 1; }
}
@keyframes julhatt-peek {
  0%   { translate: -45% 55%; rotate: 0deg; scale: .5; }
  60%  { translate: 4% -6%; rotate: 28deg; scale: 1.06; }
  80%  { translate: 0 0; rotate: 17deg; scale: 1; }
  100% { translate: 0 0; rotate: 20deg; scale: 1; }
}
@keyframes julhatt-wobble {
  0%, 100% { rotate: 20deg; }
  25% { rotate: 28deg; }
  50% { rotate: 14deg; }
  75% { rotate: 23deg; }
}
@keyframes julhatt-flake {
  0%   { opacity: 1; translate: 0 0; scale: .4; rotate: 0deg; }
  70%  { opacity: 1; }
  100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1; rotate: var(--r); }
}
@keyframes julhatt-hop {
  0%   { translate: 0 0; rotate: 0deg; }
  25%  { translate: 0 -18%; rotate: -8deg; }
  50%  { translate: 0 0; rotate: 4deg; }
  68%  { translate: 0 -6%; rotate: -2deg; }
  100% { translate: 0 0; rotate: 0deg; }
}

/* Julbordsrutan "plingar" när man kommer dit via luvan */
@media (prefers-reduced-motion: no-preference) {
  #julbord.is-pinged > .color-box { animation: julhatt-ping .9s cubic-bezier(.3, 1.4, .5, 1); }
}
@keyframes julhatt-ping {
  0% { rotate: 0deg; scale: 1; }
  20% { rotate: -1.5deg; scale: 1.03; }
  45% { rotate: 1.2deg; }
  70% { rotate: -.5deg; }
  100% { rotate: 0deg; scale: 1; }
}