@charset "UTF-8";
/* ==========================================================
   Christmas 2026 — index
   Single-screen, no scroll. Loaded last so it overrides
   index.css / 2024_winter_*.css. Remove this <link> to switch off.
   ========================================================== */

:root {
	--xmas-bg-fallback: #1a0306;
	--xmas-focus-x: 15%;        /* narrower screens crop mostly from the right, a little from
	                               the left; 15% keeps "Season's Greetings" whole down to a
	                               square window (lettering spans ~10–58% of the image width) */
	--xmas-focus-y: 50%;
}

/* --- 1. Kill the 1950px scroll ------------------------------ */
html, body {
	height: 100%;
	min-height: 0;
	overflow: hidden;
	overscroll-behavior: none;
}
body {
	min-height: 0;
	background: var(--xmas-bg-fallback);
}

/* --- 2. Full-viewport illustration -------------------------- */
.background {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;             /* mobile: ignores browser chrome */
	min-height: 0;
	filter: none;
	background-color: var(--xmas-bg-fallback);
	background-image: url("../img/index/xmas2026/xmas2026_1920.jpg?v=20261021-final");
	background-image: image-set(
		url("../img/index/xmas2026/xmas2026_1920.webp?v=20261021-final") 1x,
		url("../img/index/xmas2026/xmas2026_3640.webp?v=20261021-final") 2x
	);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: var(--xmas-focus-x) var(--xmas-focus-y);
}

/* Large screens get the full-resolution file even at 1x */
@media (min-width: 1921px) {
	.background {
		background-image: image-set(
			url("../img/index/xmas2026/xmas2026_3640.webp?v=20261021-final") 1x
		);
	}
}

/* Grain overlay only needs to cover one screen now */
.background::before {
	height: 100%;
}

/* Scroll cue is meaningless without scroll */
.arrow-down {
	display: none;
}

/* Footer anchored to the bottom edge instead of 82vh */
.bottom {
	top: auto;
	bottom: 14px;
}

/* --- 2b. Footer & counter: warm red-beige ------------------- */
:root {
	--xmas-footer: #F2D4C7;                          /* light red-beige */
	--xmas-footer-glow: 0 0 4px rgba(110, 0, 18, .85),   /* crimson edge for legibility */
	                    0 0 9px rgba(255, 210, 190, .35); /* soft champagne halo */
}
.center-content p1,
.bottom button,
.instagram-btn,
.visitor-counter p1,
.visitor-counter span {
	color: var(--xmas-footer);
	text-shadow: var(--xmas-footer-glow);
}
.bottom .circle {
	background-color: var(--xmas-footer);
	box-shadow: 0 0 3px rgba(110, 0, 18, .85), 0 0 6px rgba(255, 210, 190, .4);
}
.instagram-btn svg {
	stroke: var(--xmas-footer);
	filter: drop-shadow(0 0 3px rgba(110, 0, 18, .85))
	        drop-shadow(0 0 6px rgba(255, 210, 190, .35));
}
.instagram-btn::after {
	background-color: var(--xmas-footer);
}

/* --- 2c. Menu hover: dark green with layered soft glow -------- */
:root {
	--xmas-hover: #053B2D;
	/* deep teal-green bleed at the letter edge -> jade -> pale aqua-mint halo */
	--xmas-hover-glow: 0 0 2px #053B2D, 0 0 4px #084A39, 0 0 7px #0F6650,
	                   0 0 11px #239E7C, 0 0 16px #4FD1A9, 0 0 24px #9BEFD6;
}
ul li:hover .hidden-list,
ul li:hover .hidden-list span {
	color: var(--xmas-hover);
	text-shadow: var(--xmas-hover-glow);
}

/* --- 2f. Hover text: accent words unified in Savoye LET ----------- */
/* Savoye's letters are drawn small, so it's set 1.4× the hover size
   (80px → 112px) to match Helvetica's weight. "ME" joins the plain words.
   --xmas-hover-size: 80px on wide screens; below ~1310px it shrinks with
   the window so the longest hover line (~1273px at 80px) never clips. */
:root {
	--xmas-menu-size: 5rem;
	--xmas-hover-size: min(var(--xmas-menu-size), calc(6.29vw - 3px));
}
.hidden-list span {
	font-size: var(--xmas-hover-size);
}
.hidden-list .A,
.hidden-list .Z,
.hidden-list .see,
.hidden-list .find,
.hidden-list .make,
.hidden-list .credit,
.hidden-list .credit i,
.hidden-list .know {
	font-family: "Savoye LET", "Snell Roundhand", cursive;
	font-weight: 400;
	font-size: calc(var(--xmas-hover-size) * 1.4);
	letter-spacing: -2px;
}
.hidden-list .me {
	font-family: 'Helvetica Neue', 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: var(--xmas-hover-size);
	letter-spacing: -.35rem;
}

/* --- 2e. Touch screens: no text swap, tap shows the hover green --- */
/* Phones/tablets can't hover, so a tap used to flash the alternate text.
   Here the label stays as is and turns green while pressed / its popup is open. */
@media (hover: none) {
	ul li:hover .hidden-list {
		display: none;
	}
	ul li:hover .shown-list {
		display: block;
	}
	/* Classes set by js/2026_christmas.js */
	ul li.is-pressed .shown-list,
	ul li.is-pressed .shown-list h1,
	ul li.is-pressed .shown-list span,
	ul li.is-open .shown-list,
	ul li.is-open .shown-list h1,
	ul li.is-open .shown-list span {
		color: var(--xmas-hover);
		text-shadow: var(--xmas-hover-glow);
	}
}

/* --- 2d. About popup: blue glow -> hover greens ------------- */
.about-popup {
	background: radial-gradient(circle, rgba(0, 0, 0, .8) 0%, rgba(25, 59, 42, .35) 70%);
	box-shadow: 0 0 20px #193B2A, 0 0 50px #193B2A;   /* deep green #193B2A */
}

/* --- 2g. Tablet portrait (iPad upright): dedicated 2:3 artwork --- */
/* 1640×2360 ≈ iPad 820×1180 @2x. Bottom-anchored like mobile, so the
   lettering stays put and squarer iPads only trim the sky. */
@media (min-width: 768px) and (orientation: portrait) {
	:root {
		--xmas-focus-x: 50%;
		--xmas-focus-y: 100%;
	}
	.background {
		background-image: url("../img/index/xmas2026/xmas2026_tablet.jpg?v=20261021-v4");
		background-image: image-set(
			url("../img/index/xmas2026/xmas2026_tablet.webp?v=20261021-v4") 1x
		);
	}
}

/* --- 3. Mobile: dedicated portrait artwork ----------------- */
/* 1170×2532 = 390×844 @3x. Anchored to the bottom so the character
   and lettering stay put; taller/shorter phones only trim the sky. */
@media (max-width: 767px) {
	:root {
		--xmas-focus-x: 50%;
		--xmas-focus-y: 100%;
	}
	.background {
		background-image: url("../img/index/xmas2026/xmas2026_mobile.jpg?v=20261021-v4");
		background-image: image-set(
			url("../img/index/xmas2026/xmas2026_mobile.webp?v=20261021-v4") 1x
		);
	}

	/* Menu scales with the screen so it stays in the sky
	   and YE JIN♥CHOI holds on one line */
	:root {
		--xmas-menu-size: min(4.1rem, 13.4vw, 7.2vh);
	}
	.content h1,
	.content span {
		font-size: var(--xmas-menu-size);
		line-height: 0.92em;
		letter-spacing: -0.07em;
	}

	/* Footer sits under the lettering, clear of the artwork */
	.bottom {
		top: auto;
		bottom: max(10px, env(safe-area-inset-bottom));
	}
}

/* --- 4. Desktop loop video over the still ------------------- */
/* The still is always painted first (.background). js/2026_christmas.js
   adds the <video> only on landscape screens with a decent connection,
   and fades it in once it can play through. */
.xmas-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--xmas-focus-x) var(--xmas-focus-y);
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
	z-index: 0;
}
.xmas-video.is-ready {
	opacity: 1;
}
.background::before {
	z-index: 1;   /* grain stays on top of the video */
}
/* Each layout (landscape / tablet portrait / phone) gets its own loop */