/* άλλο research: winter theme (js/winter.js adds html.wi from 1 December until the end of 6 January). */
:root { --wi: 160, 205, 255; }

/* shared pieces */
.wi-props { position:absolute; inset:0; z-index:6; overflow:hidden; pointer-events:none; }
.wi-prop { position:absolute; transform:translate(-50%, -100%); }
.wi-prop svg, .wi-strip svg { display:block; overflow:visible; }
.wi-prop > svg { filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.wi-strip { position:absolute; }
.wi-cap svg { filter:drop-shadow(0 -2px 6px rgba(var(--wi), .25)) drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.wi-snow { position:fixed; inset:0; width:100%; height:100%; z-index:30; pointer-events:none; }

/* the lights turn icy */
html.wi .halos i::before{ background:radial-gradient(closest-side, rgba(var(--wi), .24), rgba(var(--wi), .07) 55%, transparent); }
html.wi .glass::before{ background:radial-gradient(240px circle at var(--lx) var(--ly), rgba(var(--wi), .9), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.2), transparent 32%, transparent 72%, rgba(255,255,255,.06)); }
html.wi .eyebrow{ color:#a9cdf5; }
html.wi .btn-white:hover{ box-shadow:0 0 30px rgba(var(--wi), .45); }
html.wi .stage .surface { filter:sepia(.35) saturate(1.7) hue-rotate(170deg) brightness(1.02); }
html.wi .hdr .btn-white { box-shadow:0 0 0 1px rgba(var(--wi), .6), 0 0 22px rgba(var(--wi), .3); }

/* the greeting */
.wi-hello { position:absolute; left:40px; top:146px; margin:0; display:flex; align-items:center; gap:8px; font:italic 500 23px/1 var(--wm); color:#cfe6ff; text-shadow:0 0 14px rgba(var(--wi), .5); }
.wi-hello span { display:inline-flex; }
html.m .wi-hello .wi-fl { animation:wi-spin 9s linear infinite; }
@media (max-width: 900px) { .wi-hello { position:relative; left:auto; top:auto; margin-top:10px; font-size:20px; } }
@keyframes wi-spin { to { transform:rotate(360deg); } }
@keyframes wi-tw { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.75); } }

/* a beanie on the logo */
.wi-hat { position:absolute; left:-5px; top:-15px; pointer-events:none; transform:rotate(-14deg); transform-origin:50% 90%; }
.wi-hat svg { display:block; }
html.m .wi-hat { animation:wi-hat 4s ease-in-out infinite; }
@keyframes wi-hat { 0%, 100% { transform:rotate(-14deg); } 50% { transform:rotate(-8deg) translateY(-1px); } }

/* a different winter thing on every button; hovering the button wakes it */
.wi-k-flake svg { transition:transform .6s cubic-bezier(.2,.8,.2,1); }
html.m .wi-k-flake svg { animation:wi-spin 10s linear infinite; }
.wi-k-flake.on svg { transform:scale(1.35); }
.wi-k-mitten { transform:translate(-50%, -100%) rotate(-12deg); }
.wi-k-mitten svg { transform-origin:50% 90%; }
.wi-k-mitten.on svg { animation:wi-wave .5s ease-in-out 2; }
@keyframes wi-wave { 0%, 100% { transform:rotate(0); } 30% { transform:rotate(-18deg); } 70% { transform:rotate(14deg); } }
.wi-k-snowman svg, .wi-k-tree svg, .wi-k-beanie svg { transform-origin:50% 100%; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.wi-k-snowman.on svg { transform:translateY(-8px) rotate(-6deg); }
.wi-prop .st { transform-box:fill-box; transform-origin:center; }
html.m .wi-prop .st { animation:wi-tw 2.4s ease-in-out infinite; }
.wi-k-tree.on .b { filter:drop-shadow(0 0 3px #fff); }
.wi-k-tree.on svg { transform:scale(1.12); }
.wi-k-mug .steam { opacity:.3; transition:opacity .4s; }
html.m .wi-prop .steam { animation:wi-steam 2.4s ease-in-out infinite; }
.wi-k-mug.on .steam { opacity:1; }
@keyframes wi-steam { 0%, 100% { transform:translateY(0); opacity:.35; } 50% { transform:translateY(-2px); opacity:.8; } }
.wi-k-star svg { transition:transform .5s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 0 5px rgba(255,213,106,.7)); }
html.m .wi-k-star svg { animation:wi-tw 2.8s ease-in-out infinite; }
.wi-k-star.on svg { transform:translateY(-6px) rotate(72deg) scale(1.3); }
.wi-k-beanie { transform:translate(-50%, -100%) rotate(-12deg); }
.wi-k-beanie.on svg { transform:translateY(-7px) rotate(-8deg); }

/* the skier on the hero surface: the point under his skis follows the ground */
.wi-skier { position:absolute; left:0; top:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .6s; will-change:transform; }
.wi-skier.on { opacity:1; }
.wi-sk { position:absolute; left:-15px; top:-27.5px; width:30px; height:27.5px; transform-origin:50% 91%; }
.wi-sk svg { display:block; overflow:visible; filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.wi-skier::after { content:""; position:absolute; left:-18px; top:-6px; width:36px; height:10px; border-radius:50%; opacity:0;
  background:radial-gradient(closest-side, rgba(242,246,251,.95), rgba(242,246,251,0)); }
.wi-skier.land::after { animation:wi-spray .45s ease-out; }
@keyframes wi-spray { 0% { opacity:1; transform:scale(.4, .6); } 100% { opacity:0; transform:scale(1.8, 1.4) translateY(-6px); } }

/* the opening logo: icy mark, the ο becomes a snowflake, a puff of snow */
.wi-splash { background:radial-gradient(40% 40% at 50% 52%, rgba(var(--wi), .12), transparent 70%), var(--bg); }
.wi-splash .brand > svg { color:#cfe6ff; filter:drop-shadow(0 0 12px rgba(var(--wi), .6)); }
.wi-splash .wi-o { display:inline-block; vertical-align:-.12em; margin:0 .12em 0 .03em; animation:wi-pop .7s cubic-bezier(.3,1.6,.5,1) .85s backwards; }
.wi-splash .wi-o svg { display:block; filter:drop-shadow(0 0 14px rgba(var(--wi), .6)); }
html.m .wi-splash .wi-o svg { animation:wi-spin 6s linear 1.6s infinite; }
@keyframes wi-pop { from { transform:scale(0) rotate(-120deg); } }
.wi-puff { position:absolute; left:50%; top:50%; width:0; height:0; }
.wi-pf { position:absolute; left:-10px; top:-10px; opacity:0; animation:wi-pf 1.4s cubic-bezier(.2,.6,.3,1) var(--dl) forwards; }
.wi-pf svg { display:block; }
@keyframes wi-pf { 0% { opacity:1; transform:translate(0, 0) scale(.3) rotate(0); } 75% { opacity:.9; } 100% { opacity:0; transform:translate(var(--tx), var(--ty)) scale(1) rotate(180deg); } }