/* ============= background behind artboard / background of landing which will have scene on top ============= */
body {margin: 0; background-color: black;}

#landing {width: 100%; height: 100vh; position: relative; overflow: hidden; background-color: black;}

/* ============= viewing instructions in black space outside ============= */
.desktop-prompt {position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 95%; text-align: center; color: #e8d8c8; font-size: clamp(10px, 1vw, 14px); opacity: 0.8; pointer-events: none;}

/* ============= fixed ratio artboard - basically the background canvas ============= */
.scene {position: absolute; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); aspect-ratio: 16 / 9; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #e8d8c8; overflow: hidden;}


/* ============= fixing z index for landing ============= */
.scene >img[src="landing-pics/landing-wall.PNG"] {z-index: 0;}
.framed-ham-link {z-index: 1;}
.scene >img[src="landing-pics/landing-bag.PNG"] {z-index: 4;}

/* ============= actual artwork layers - my imported pngs! :> ============= */
.art-layer {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; object-fit: fill;}
.ham-art-layer {position: absolute; top: 0; left: 0; height: 44%; width: auto; z-index: 1;}
.static-layer {pointer-events: none;}
.art-layer .static-layer {z-index: 10;}


/* interactive framed hammy photo - links to my process */
.framed-ham-link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.framed-ham-link > img:first-child {pointer-events: auto; cursor: pointer;} 
/* framed ham hover target - bullseye!! :P */
.ham-hover-target {position: absolute; top: 12.5%; left: 2%; width: 13%; height: 28%; cursor: pointer; z-index: 130; pointer-events: auto; border-radius: 50%;}
/* framed ham scribble + hover effects */
.frame-scribble {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; z-index: 120; display: none;}
.scene.framed-ham-hovered .ham-scribble-1 {display: block; animation: ham-scribble-one 0.333s steps(1, end) infinite;}
.scene.framed-ham-hovered .ham-scribble-2 {display: block; animation: ham-scribble-two 0.333s steps(1, end) infinite;}
@keyframes ham-scribble-one {0%, 49.9% {opacity: 1;} 50%, 100% {opacity: 0;}}
@keyframes ham-scribble-two {0%, 49.9% {opacity: 0;} 50%, 100% {opacity: 1;}}
/* framed ham scribble arrow */
.frame-arrow {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; z-index: 121; opacity: 0;}
.scene.framed-ham-hovered .frame-arrow-1 {display: block; animation: ham-arrow-one 0.333s steps(1, end) infinite;}
.scene.framed-ham-hovered .frame-arrow-2 {display: block; animation: ham-arrow-two 0.333s steps(1, end) infinite;}
@keyframes ham-arrow-one {0%, 49.9% {opacity: 1;} 50%, 100% {opacity: 0;}}
@keyframes ham-arrow-two {0%, 49.9% {opacity: 0;} 50%, 100% {opacity: 1;}}
/* framed ham scribble label popup */
.framed-ham-popup {position: absolute; top: 47%; left: 8.5%; width: max-content; max-width: 45%; opacity: 0; transform: translateY(-8px); pointer-events: none; z-index: 122; transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s;}
.scene.scene.framed-ham-hovered .framed-ham-popup {opacity: 1; transform: translateY(0);}
.scene:not(.framed-ham-hovered) .framed-ham-popup {transition-delay: 0s; transition-duration: 0s;}
.frame-label {display: inline-block; color: white; font-size: clamp(86px, 10vw, 120px); padding: 0.6em 0.5em; border-radius: 1px; background: rgba(51, 20, 42, 0.4); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); mask-image: radial-gradient(ellipse at center, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 100%);}
    

/* flower lights + on and off display + glow */
.lights {position: absolute; top: 0; left: 0; width: 100%; height: 16%; cursor: pointer; z-index: 50; overflow: visible;}
.lights img {position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: contain;}
.lights-off, .lights-scribble {display: none;}
.dark-overlay {position: absolute; inset: 0; background: rgba(30, 50, 120, 0.3); opacity: 0; pointer-events: none; transition: none; z-index: 500;}
#landing.lights-are-off .dark-overlay {opacity: 1;}
#landing.lights-are-off .lights-on {display: none;}
#landing.lights-are-off .lights-off {display: block;}
.lights-glow {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: fill; pointer-events: none; z-index: 100; mix-blend-mode: plus-lighter; filter: sepia(0.5) saturate(1.8); opacity: 1;;}
/* hiding popup until hover -> reveal popup on hover -> flower lights hover effects */
.lights-popup {position: absolute; top: 26%; left: 17%; display: flex; align-items: center; width: max-content; opacity: 0; transform: translateY(-8px); pointer-events: none; white-space: nowrap; z-index: 103; transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s}
.scene.lights-hovered .lights-popup {opacity: 1;  transform: translateY(8px);}
.lights-scribble {position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; display: none; z-index: 500;}
.scene.lights-hovered .scribble-frame-1 {display: block; animation: scribble-one 0.333s steps(1, end) infinite;}
.scene.lights-hovered .scribble-frame-2 {display: block; animation: scribble-two 0.333s steps(1, end) infinite;}
@keyframes scribble-one {0%, 49.9% {opacity: 1;} 50%, 100% {opacity: 0;}}
@keyframes scribble-two {0%, 49.9% {opacity: 0;} 50%, 100% {opacity: 1;}}
/* flower lights popup arrow -> popup arrow animation */
.lights-arrow {position: absolute; top: 3%; left: 12%; width: 85%; height: 85%; object-fit: fill; pointer-events: none; z-index: 120; transition: opacity 0.25s ease, transform 0.25s ease}
.scene.lights-hovered .arrow-frame-1 {animation: arrow-one 0.333s steps(1, end) infinite; transform: translateY(8px);}
.scene.lights-hovered .arrow-frame-2 {animation: arrow-two 0.333s steps(1, end) infinite; transform: translateY(8px);}
.scene:not(.lights-hovered) .arrow-frame-1, .scene.scene:not(.lights-hovered) .arrow-frame-2 {animation: none; opacity: 0; transform: translateY(0)}
@keyframes arrow-one {0%, 49.9% {opacity: 1} 50%, 100% {opacity: 0;}}
@keyframes arrow-two {0%, 49.9% {opacity: 0} 50%, 100% {opacity: 1;}}
/* flower lights popup text */
.lights-label {color: white; font-size: clamp(86px, 10vw, 120px); padding: 0.6em 0.5em; border-radius: 1px; background: rgba(51, 20, 42, 0.4); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); mask-image: radial-gradient(ellipse at center, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 100%);}
.scene.scene:not(.lights-hovered) .lights-popup {transition-delay: 0s;}




/* ============= start button ============= */
.start-button-wrap {position: absolute; bottom: 3.7%; left: 73.3%; width: 27.1%; height: 18%; transform: translateX(-50%); z-index: 650;}
.start-button {position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; font-family: inherit; font-size: 4vh; color: white; background: rgba(51, 20, 42, 0.25); border: none; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, filter 0.25s ease; border-radius: 3% 6% 4% 5% / 15% 8% 12% 7%;}
.start-button-outline, .start-butt-scribble {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none;}
.start-button-outline {z-index: 651; opacity: 1; transition: opacity 0.1s ease;}
.start-butt-scribble {z-index: 652; display: none; transform-origin: center; transition: opacity 1.8s ease;}
.start-button:hover {background: rgba(255, 245, 250, 0.55); box-shadow: 0 0 20px rgba(255, 226, 239, 0.45); filter: brightness(1.08);}
.scene:has(.start-button-wrap:hover) .start-button-outline {opacity: 0;}
.scene:has(.start-button-wrap:hover) .scribble-start-1 {display: block; animation: start-scribble-one 0.333s steps(1, end) infinite;}
.scene:has(.start-button-wrap:hover) .scribble-start-2 {display: block; animation: start-scribble-two 0.333s steps(1, end) infinite;}
.scene:has(.start-button-wrap:hover) .start-button-wrap {animation: start-button-tilt 0.5s ease-out forwards;}
.scene:has(.start-button-wrap:hover) .start-button-outline, .scene:has(.start-button-wrap:hover) .start-butt-scribble {transform: scale(1) rotate(-1deg); transform-origin: 50% 92%;}
@keyframes start-scribble-one {0%, 49.9% {opacity: 1;} 50%, 100% {opacity: 0;}}
@keyframes start-scribble-two {0%, 49.9% {opacity: 0;} 50%, 100% {opacity: 1;}}
@keyframes start-button-tilt {to {transform: translateX(-50%) rotate(-1deg) scale(1);}}
.start-button:focus-visible {outline: 3px dashed #55364a; outline-offset: 5px;}

/* ============= opening sequence: blur ============= */
.scene-blur-overlay {position: absolute; inset: 0; z-index: 600; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); opacity: 0; pointer-events: none; transition: opacity 1.8s ease 0.8s, backdrop-filter 1.8s ease 0.8s; background: rgba(35, 48, 78, 0.5);}
.scene.starting .scene-blur-overlay {opacity: 1; backdrop-filter: blur(200px); -webkit-backdrop-filter: blur(200px);}
.start-button-wrap {transition: opacity 1.2s ease;}
.scene.starting .start-button-wrap {opacity: 0; pointer-events: none;}
.scene.starting .start-button-outline, .scene.starting .start-butt-outline, .scene.starting .start-butt-scribble {opacity: 0 !important; transition: opacity 1.2s; visibility: hidden; pointer-events: none;}
.scene.starting .start-button-outline, .scene.starting .start-butt-scribble {opacity: 0;}


/* ============= bottom of landing exploration prompt ============= */
.explore-prompt {position: absolute; margin: 0; bottom: 0; left: 3%; transform: translateY(-50%); width: max-content; max-width: 90%; text-align: left; color: rgb(255, 194, 247); font-size: 1.4vw ; z-index: 600; pointer-events: none; text-shadow: 0 1px 4px #1b0905; opacity: 0; transition: opacity 1.2s ease}
.explore-prompt.visible {opacity: 0.65;}


/* ============= comic panels layout ============= */
.comic-sequence {position: absolute; inset: 0; z-index: 700; pointer-events: none;}
.comic-panel {position: absolute; display: block; height: auto; object-fit: contain; transition: opacity 0.5s ease; width: 25%;}
.panel-1 {left: 2%; top: 7%;}
.panel-2 {left: 2%; top: 36%;}
.panel-3 {left: 2%; top: 64.5%;}
.panel-4 {left: 40%; top: 10%;}
.panel-5 {left: 40%; top: 60%;}
.panel-6 {left: 70%; top: 10%;}
.comic-panel.visible {opacity: 1; visibility: visible;}