/* Design by Ciarán O'Kelly March 2026 */

/* EXTEND CORE STYLING */
:root { --bg-color:#000; --text-color:#fff; --hcol:#00ffff; --h2col:#ff0000; --h3col:#ffff00; --h4col:#00ff00; --yellow:var(--h3col); --red:var(--h2col); --cyan:var(--hcol); --angle:225deg; --flicker-opacity:0.1; }
h1, h2, .strong-font { font-family:'Archivo Black', sans-serif; font-weight:normal; text-align:left; }
h1 { text-transform:uppercase; letter-spacing:-0.6vw; font-size:14vh; line-height:0.75; }
h2 { text-transform:uppercase; letter-spacing: -0.3vw; font-size:10vh; line-height:0.85; margin-top:20px;}
h3 { margin:10px 0 20px; text-align:left; font-size:13px; font-weight: bold; text-transform:uppercase; letter-spacing:normal; }
.btn{font-family:'Roboto Mono', monospace;}
.h3col{color: var(--h3col);}
.h3back{background-color: var(--h3col);}
.h4col{color: var(--h4col);}
.h4back{background-color: var(--h4col);}
.spinner.pixels { border:4px dotted currentColor; width:44px; aspect-ratio:1 / 1; height:auto; animation:spin 2s infinite linear; }
.spinner.pixels:before { display: none; }
.dotdotdot, .dotdotdot:before, .dotdotdot:after{ border-radius: 0; }

/* GENERAL STYLES */
html { scroll-snap-type:y proximity; scroll-behavior:smooth; overflow-x:hidden; background:#000; }
body { background-color:transparent; color:var(--text-color); font-family:'Roboto Mono', monospace; margin:0; padding:40px 40px 40px 0; background:transparent; font-size:14px; transition:margin 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.ambient-container { position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:transparent; z-index:-1; pointer-events:none; opacity:0; transition:opacity 3s ease-in-out; }
body.entered .ambient-container { opacity:1; }
.sun-rays { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; background:conic-gradient(from calc(var(--angle) - 24deg) at 125% -25%, transparent 0deg, currentColor 10deg, transparent 60deg, transparent 360deg); filter:blur(40px); -webkit-mask-image:radial-gradient(circle at 125% -25%, black 0%, transparent 75%); mask-image:radial-gradient(circle at 125% -25%, black 0%, transparent 75%); opacity:var(--flicker-opacity); mix-blend-mode:screen; }

/* NAV */
.main-nav { position:fixed; top:20px; left:329px; z-index:1001; font-size:14px; color:var(--hcol); font-family:'Roboto Mono', monospace; }
.main-nav a { color:var(--hcol); text-decoration:none; font-weight:bold; }
.main-nav a:hover { color:var(--text-color); }
.main-nav a.on { color:var(--h4col); }
.main-nav, #dorone-paris-heading {	transition:transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
#dorone-paris-heading.scrolled-state { position:fixed; top:40px; left:50px; margin:0; z-index:1000; line-height:1; display:flex; }
#dorone-paris-heading.scrolled-state .prefix-text, #dorone-paris-heading.scrolled-state br { display:none; }
#dorone-paris-heading.scrolled-state .hcol { color:#fff !important; display:inline-block; margin-right:20px; font-size:60px; text-shadow:2px 2px 10px rgba(0,0,0,0.8); }

/* ENTER OVERLAY */
#enter-overlay { position:fixed; top:0; left:0; width:100vw; height:100vh; background:transparent; z-index:999; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:opacity 3s ease-in-out; }
#enter-overlay.fade-out { opacity:0; pointer-events:none; }

#dorone-paris-heading { font-size:14vh; line-height:0.75; margin:0; letter-spacing:-0.04em; transform-origin:left top; position:relative; z-index:1000; transition: opacity 3s ease-in-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
body.entering #dorone-paris-heading { transition: opacity 3s ease-in-out, filter 3s ease-in-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
body:not(.entered) #dorone-paris-heading { opacity: 0 !important; filter: blur(20px) !important; pointer-events: none; }
body:not(.entered) .main-nav { opacity: 0 !important; transform: translateY(-30px); pointer-events: none; animation: none !important; }
body:not(.entered) .left-block { opacity: 0 !important; transform: translateX(-30px); pointer-events: none; animation: none !important; }
body:not(.entered) .scroll-indicator { opacity: 0 !important; transform: translate(-100%, -10px); pointer-events: none; animation: none !important; }
.pre-enter, .pre-enter body { overflow: hidden !important; height: 100vh; width: 100vw; }
body.entering .main-nav { transition: opacity 1.5s ease-out 2s, transform 1.5s ease-out 2s !important; animation: none !important; }
body.entering .left-block { transition: opacity 1.5s ease-out 2s, transform 1.5s ease-out 2s !important; animation: none !important; }
body.entering .scroll-indicator { transition: opacity 1.5s ease-out 2s, transform 1.5s ease-out 2s !important; animation: none !important; }

/* HERO */
.hero-section { height:100vh; display:flex; align-items:center; position:relative; padding:0 5vw; box-sizing:border-box; background:transparent; scroll-snap-align:start; }
.scroll-indicator { position:absolute; bottom:50px; left:50%; transform:translateX(-100%); text-align:center; font-size:12px; color:var(--h4col); letter-spacing:0.1em; }
.left-block { position:fixed; top:0; left:0; width:30px; height:180px; z-index:2100; visibility:visible; display:flex; justify-content:center; transition:width 300ms, background 300ms, left 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); cursor:pointer; user-select:none; }
	.left-block:hover { width:40px; }
	.left-block:hover .bio-plus-icon { transform:rotate(90deg); }
	body.bio-active .left-block { background-color:#222; left:70vw; top:50px !important; }
	body.bio-active .left-block .bio-plus-icon { transform:rotate(45deg); }
	body.bio-active .left-block:hover { background-color: var(--hcol);}
	body.bio-active .left-block:hover .bio-plus-icon { transform:rotate(135deg); }
	.bio-plus-icon { color:#FFF; font-size:30px; line-height:1; height:30px; transition:transform 300ms; margin-top:5px; pointer-events:none; }

/* WORKS */
.work-item { width:100%; height:calc(100vh - 10px); display:flex; flex-direction:column; box-sizing:border-box; position:relative; opacity:0; background:transparent; margin-bottom:300px; padding-top:25px; scroll-snap-align:start; }
.work-slideshow { position:absolute; top:135px; left:280px; right:0; bottom:0; z-index:1; overflow:hidden; border-top:solid 2px var(--h2col); filter:grayscale(1); transition:filter 3s; }
.slide { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:opacity 1.5s ease-in-out; }
.slide.active { opacity:1; }
.video-bg { position:absolute; top:135px; left:280px; right:0; bottom:0; z-index:2; /* above .work-slideshow (z-index:1) */ object-fit:cover; width:calc(100% - 280px); height:calc(100% - 135px); opacity:0; transition:opacity 500ms, filter 5s; border-top:solid 2px var(--h2col); filter:grayscale(1); pointer-events:none; }
.work-item.media-active .video-bg { opacity:1; pointer-events:auto; }
.work-item.media-active .work-slideshow { opacity:0; }
.work-item.is-playing .work-slideshow,
.work-item.is-playing .video-bg { filter:grayscale(0); }
.work-foreground { position:relative; z-index:10; width:100%; height:100%; display:flex; flex-direction:column; box-sizing:border-box; pointer-events:none; }
.work-foreground>*:not(.work-content-row) { pointer-events:all; }
.work-header-row { display:flex; justify-content:flex-end; align-items:flex-start; position:absolute; top:-3px; right:5px; z-index:20; text-align:right; width:100%; }
.work-title { font-size:115px; color:var(--yellow); letter-spacing:-10px; text-transform:uppercase; white-space:nowrap; text-align:right; }
.work-banner-row { margin:0; position:absolute; top:81px; left:330px; right:0; z-index:20; }
.work-banner { background:var(--red); color:#000; padding:5px 20px; font-family:'Roboto Mono', monospace; font-weight:bold; display:inline-block; text-transform:uppercase; }
.work-content-row { flex-grow:1; display:flex; align-items:flex-start; padding-top:80px; }
.work-info-box { left:20px; width:310px; background:transparent; margin-right:-20px; position:relative; z-index:15; pointer-events:all; }
.work-details { font-size:14px; line-height:1.45; color:var(--hcol); padding:0 15px 15px 0; background:var(--bg-color); margin-left:35px; }
.work-details p { margin-top:0; margin-bottom:0.75em; }
.work-details p:last-child { margin-bottom:0; }
.slide-controls { display:flex; justify-content:center; gap:15px; margin-bottom:30px; margin-left:320px; pointer-events:none!important; }
.slide-controls .dot { width:12px; height:12px; border:2px solid var(--yellow); border-radius:50%; cursor:pointer; pointer-events:all; }
.slide-controls .dot:hover { transform:scale(1.25); }
.slide-controls .dot.active { background:var(--yellow); }
.layup-symbols { display:none; }

/* AUDIO UI */
.work-audio-ui { position:absolute; top:135px; left:330px; right:0; overflow:visible; z-index:25; pointer-events:none; border-top:2px solid var(--h2col); }
.work-waveform { position:absolute; bottom:0; left:0; pointer-events:auto; cursor:crosshair; top:0; }
.wave-hover-line { position:absolute; top:-31px; left:0; width:2px; height:110px; background:var(--red); opacity:0; pointer-events:none; transform:translateX(-9999px); transition:opacity 100ms; z-index:26; }
.work-audio-ui:hover .wave-hover-line { opacity:0.75; }
.work-play-btn { position:absolute; left:15px; top:20px; z-index:60; background:transparent !important; color:var(--yellow) !important; border:2px solid var(--yellow) !important; pointer-events:auto; transition:color 200ms, border-color 200ms, transform 200ms; }
	.work-play-btn:hover { transform:scale(1.12); }
	.work-play-btn.playing { color:var(--red) !important; border-color:var(--red) !important; }
	.work-play-btn .spinner { display:none; }
		.work-play-btn.is-loading .spinner { display:inline-block; }
		.work-play-btn.is-loading svg { display:none !important; }
	.video-fs-btn { position:absolute; bottom:20px; right:20px; z-index:70; background:transparent !important; color:var(--yellow) !important; border:2px solid var(--yellow) !important; width:50px; height:50px; line-height:50px; padding:0; border-radius:500px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity 300ms, background 200ms, color 200ms, transform 200ms; display:flex; justify-content:center; align-items:center; }
	.video-fs-btn:hover { transform:scale(1.12); color:var(--red) !important; border-color:var(--red) !important; }
	.work-item.media-active .video-fs-btn { opacity:1; pointer-events:auto; }

	.video-fs-wrapper { display:contents; }
	.video-fs-wrapper:fullscreen { display:block; width:100vw; height:100vh; background:#000; z-index:99999; position:fixed; top:0; left:0; }
	.video-fs-wrapper:fullscreen .video-bg { position:fixed; top:0; left:0; width:100vw; height:100vh; border:none; filter:none; max-width:100vw; object-fit:contain; }
	.video-fs-wrapper:fullscreen .video-fs-btn { position:fixed; bottom:20px; right:20px; z-index:100; opacity:0.3; }
	.video-fs-wrapper:fullscreen .video-fs-btn:hover { opacity:1; }

/* ORIENTATION OVERLAY */
#orientation-overlay { position:fixed; top:0; left:0; width:100vw; height:100vh; background:#000; z-index:10000; display:none; flex-direction:column; justify-content:center; align-items:center; color:var(--hcol); text-align:center; font-family:'Roboto Mono', monospace; pointer-events:none; }
.overlay-content { display:flex; flex-direction:column; align-items:center; gap:20px; }
.rotate-icon { width:120px; height:120px; color:var(--hcol); }

/* BIO PANEL */
#bio {	position:fixed;	top:0;	left:-100%;	width:70vw;	height:100vh; outline:none; background:#111;z-index:2000; transition:left 0.6s cubic-bezier(0.22, 1, 0.36, 1); padding:100px 80px; box-sizing:border-box; overflow-x: hidden; overflow-y:auto; }
#bio.active {	left:0; }
#bio p{ line-height: 1.8; margin-bottom: 1.5em;}
#bio ul { list-style: none; padding: 0; margin: 0; }
#bio li { line-height:1.4; border-top:solid 1px #222; padding:1.5em 0;}
#bio li:last-of-type{ border-bottom:solid 1px #222; }
#bio li b:first-of-type{ color:white}
#bio a { border-bottom:solid 2px }
#bio a:hover { color:#FFF;}
#bio hr { margin: 100px -80px 20px; }
#pop-overlay {	position:fixed;	top:0;	left:0;	width:100vw;	height:100vh;	background:rgba(0,0,0,0.5); backdrop-filter:blur(5px);	z-index:1999;	opacity:0;	visibility:hidden;	transition:opacity 0.6s, visibility 0.6s, left 0.6s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
#pop-overlay.active {	opacity:1;	visibility:visible; }

/* CONTACT PANEL */
#contact { position:fixed; top:0; left:-100%; width:500px; height:100vh; outline:none; z-index:2001; transition:left 0.6s cubic-bezier(0.22, 1, 0.36, 1); padding:80px 40px; box-sizing:border-box; overflow-y:auto; overflow-x: hidden; border-right:4px solid var(--h2col); }
#contact.active { left:0; }
#contact h2 { font-size:85px; margin-left:-4px; letter-spacing:-6px; }
#contact label { display:block; margin-bottom:16px; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; font-weight:bold; }
#contact label span { display:inline-block; margin-bottom:6px; font-size:10px; transition:background 300ms }
#contact label:hover span { color:#FFF; background:var(--h2col); padding:0 10px; }
#contact input[type=text], #contact textarea, #contact select { font-family:'Roboto Mono', monospace; font-size:15px; box-sizing:border-box; width:100%; padding:10px 12px; font-weight:bolder; color:#333; border:solid 2px; background: transparent;  transition:all 300ms }
#contact textarea { min-height:120px; resize:vertical; }
#contact input[type=submit] { display:block; width:100%; background:#333; color:#fff; border:none; padding:12px 20px; font-family:'Roboto Mono', monospace; font-size:13px; font-weight:bold; text-transform:uppercase; letter-spacing:0.1em; cursor:pointer; transition:background 250ms, color 250ms; margin-top:10px; }
#contact input[type=submit]:hover { background:#000; color:#fff; }
#contact #label_submit { margin-top:10px; }
#contact input[type=submit]:active, #contact input[type=submit]:focus{ background:var(--h2col)!important; color:#fff!important; }
form input:focus, form select:focus, form textarea:focus  { background:#FFF!important; color:var(--h2col)!important; }
form input[value]:not([value='']) { background:inherit; }
#contact .btn:hover{ background-color: var(--h2col); }
body.contact-active .left-block { background-color:#222; left:500px; top:50px !important; }
body.contact-active .left-block .bio-plus-icon { transform:rotate(45deg); }
body.contact-active .left-block:hover { background-color: var(--h2col); }
body.contact-active .left-block:hover .bio-plus-icon { transform:rotate(135deg); }

/* TABLETS & MOBILES */
@media only screen and (max-width: 1023px) {
	body{ padding-right:20px;}
	#bio{ padding: 60px; }
	#bio p.largeTxt{line-height: 1.5;}
	#contact, #bio { max-width: 100vw; border-right:0; }
		#contact h2{ font-size: min(16.5vw, 85px);}
	#dorone-paris-heading.scrolled-state { left:45px; }
	#dorone-paris-heading.scrolled-state .hcol {margin-right:7px; font-size: 30px;}
	.main-nav { top:13px; left: 45px}
	.work-header-row {top:-7.3vh;}
		.work-title { font-size:15vh; letter-spacing: -7px; }
	.work-info-box{width: 260px; left:15px;}
	.work-details{ font-size: 13px; }
	.work-content-row {padding-top: 60px;}
	.work-banner-row{ left:auto; padding-top:55px; top:-13px }
	.work-banner { padding:3px 15px; font-size: 12px; }
	.work-audio-ui, .video-bg, .work-slideshow{ top:88px; left:280px}
	.slide-controls{ position:absolute; bottom:-35px; left:0; right:0; }
}
/* PROTRAIT TABLETS & MOBILES */
@media only screen and (max-width:1023px) and (orientation:portrait) {
	body:not(.bio-active):not(.contact-active) #orientation-overlay { display:flex!important; }
	body.contact-active .left-block{  left:auto; right:0; background-color:var(--h2col); }
	#contact{ border-right: solid 5px var(--h2col);}
}