/* Daniel Gale portfolio — styles & animations */
body{margin:0;background:#FBF7EE}
a{color:#111111;text-decoration:none}a:hover{color:#C2361A}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@keyframes rise{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes pop{0%{opacity:0;scale:.86}70%{opacity:1;scale:1.03}100%{opacity:1;scale:1}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes spin{to{rotate:360deg}}
@keyframes blob{0%,100%{border-radius:58% 42% 50% 50%/46% 55% 45% 54%}33%{border-radius:46% 54% 42% 58%/56% 44% 56% 44%}66%{border-radius:54% 46% 58% 42%/44% 58% 42% 56%}}
@keyframes marquee{to{translate:-50% 0}}
@keyframes wave{0%,100%{rotate:0deg}25%{rotate:-5deg}75%{rotate:3deg}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.2s}.d3{animation-delay:.35s}.d4{animation-delay:.5s}.d5{animation-delay:.65s}.d6{animation-delay:.8s}
.pop{animation:pop 1s cubic-bezier(.2,.8,.2,1) .25s both}
.float{animation:float 4s ease-in-out infinite}
.float-b{animation:float 5.5s ease-in-out 1s infinite}
.spin{animation:spin 16s linear infinite}
.blob{animation:blob 12s ease-in-out infinite}
.wave{display:inline-block;transform-origin:20% 80%;animation:wave 3s ease-in-out 1.2s infinite}
.blink{animation:blink 1.6s ease-in-out infinite}
.marquee{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee-wrap:hover .marquee{animation-play-state:paused}
.lift{transition:translate .25s ease,box-shadow .25s ease}
.lift:hover{translate:-4px -6px;box-shadow:14px 14px 0 #111111 !important}
.lift img{transition:scale .6s ease}
.lift:hover img{scale:1.03}
.poster{transition:transform .35s ease,scale .35s ease;position:relative}
.poster:hover{transform:rotate(0deg) !important;scale:1.05;z-index:2}
.device-link{transition:scale .35s ease}
.device-link:hover{scale:1.03}
.device-link .open-badge{opacity:0;transition:opacity .25s ease,translate .25s ease;translate:0 8px}
.device-link:hover .open-badge,.device-link:focus-visible .open-badge{opacity:1;translate:0 0}
.tile{transition:translate .2s ease,scale .2s ease,box-shadow .2s ease}
.tile:hover{translate:0 -5px;scale:1.07;box-shadow:0 6px 0 #111111}
.btn{transition:translate .15s ease,box-shadow .15s ease}
.btn:hover{translate:-2px -2px;box-shadow:6px 6px 0 #F25C3B !important}
.svc{transition:translate .25s ease}
.svc:hover{translate:0 -6px}
.svc:hover .svc-icon{animation:wave .6s ease-in-out}
@keyframes slide{0%{opacity:0;scale:1.05}4%{opacity:1}33%{opacity:1}37%{opacity:0;scale:1}100%{opacity:0}}
@keyframes dotfill{0%,36%{background:#F25C3B;width:38px}37%,100%{background:#FFFFFF;width:22px}}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;animation:slide 12s ease-in-out infinite}
.slides img:first-child{opacity:1}
.slides img:nth-child(2){animation-delay:4s}.slides img:nth-child(3){animation-delay:8s}
.slides-phone img{animation-delay:.4s}.slides-phone img:nth-child(2){animation-delay:4.4s}.slides-phone img:nth-child(3){animation-delay:8.4s}
.dot{animation:dotfill 12s steps(1) infinite;border:1.5px solid #111111}
.dot:nth-child(2){animation-delay:4s}.dot:nth-child(3){animation-delay:8s}
.stage:hover .slides img{animation-play-state:paused}
@supports (animation-timeline: view()){
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- Phones & small tablets ---------- */
@media (max-width: 760px){
  .nav-links{order:3;width:100%;flex-wrap:nowrap !important;overflow-x:auto;gap:18px !important;font-size:12px !important;padding-bottom:4px;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
  .hero-photo{order:0 !important;min-height:400px !important}
  .hero-name{font-size:96px !important}
  .fab{padding:12px !important;min-height:56px;min-width:56px;justify-content:center}
  .fab-label{display:none}
  .work-sticker{display:none}
  .project{grid-template-columns:1fr !important}
  .project>.devices{order:-1}
  .phone>div{padding:5px !important;border-radius:22px !important}
  .phone>div>.slides{border-radius:17px !important}
  .phone>div>span{top:10px !important;height:9px !important}
}

/* ---------- Dark mode: logo colours ---------- */
.theme-toggle{cursor:pointer;width:44px;height:44px;border-radius:50%;border:2px solid #111111;background:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;padding:0;color:#111111;transition:rotate .4s ease,scale .2s ease}
.theme-toggle:hover{scale:1.08}
.theme-toggle .moon{display:none}
html[data-theme=dark] .theme-toggle{rotate:-25deg;background:linear-gradient(115deg,#2F6BFF 0%,#D63AF9 100%) !important;color:#FFFFFF !important;border-color:#0B0B0F !important}
html[data-theme=dark] .theme-toggle .sun{display:none}html[data-theme=dark] .theme-toggle .moon{display:block}
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body,html[data-theme=dark] [style*="background: #FBF7EE"]{background:#121218 !important}
html[data-theme=dark] [style*="background: #FFFDF8"]{background:#1C1C22 !important;border-color:#34343F !important}
html[data-theme=dark] [style*="background: #F6E7C8"]{background:#231A36 !important}
html[data-theme=dark] [style*="background: #FFD43B"]{background:#2F6BFF !important}
html[data-theme=dark] [style*="background: #F25C3B"]{background:#B62FD6 !important}
html[data-theme=dark] [style*="background: #7DB2F7"]{background:#7C4DFF !important}
html[data-theme=dark] .blob,html[data-theme=dark] .marquee-wrap{background:linear-gradient(115deg,#2F6BFF 0%,#D63AF9 100%) !important}
html[data-theme=dark] a.btn[style*="background: #111111"]{background:linear-gradient(115deg,#2F6BFF 0%,#D63AF9 100%) !important}
html[data-theme=dark] [style*="color: #111111"],html[data-theme=dark] a,html[data-theme=dark] :is([style*="background: #FFD43B"],[style*="background: #F25C3B"],[style*="background: #7DB2F7"]){color:#F3F0FA !important}
html[data-theme=dark] [style*="color: #3D3A35"]{color:#CFCADB !important}
html[data-theme=dark] [style*="color: #6A645A"],html[data-theme=dark] [style*="color: #5C564C"]{color:#A29DB2 !important}
html[data-theme=dark] [style*="color: #C2361A"],html[data-theme=dark] [style*="color: #F25C3B"],html[data-theme=dark] a:hover{color:#E58BFF !important}
html[data-theme=dark] :is([style*="background: #FFD43B"],[style*="background: #F25C3B"],[style*="background: #7DB2F7"]) [style*="color: #C2361A"],html[data-theme=dark] :is([style*="background: #FFD43B"],[style*="background: #F25C3B"],[style*="background: #7DB2F7"]) [style*="color: #F25C3B"]{color:#FFFFFF !important}
html[data-theme=dark] [style*="solid #111111"],html[data-theme=dark] [style*="dashed #111111"]{border-color:#0B0B0F !important}
html[data-theme=dark] [style*="dashed #CFC7B8"]{border-color:#34343F !important}
html[data-theme=dark] [fill="#111111"]{fill:#F3F0FA}html[data-theme=dark] [stroke="#111111"]{stroke:#F3F0FA}
html[data-theme=dark] [fill="#FFD43B"]{fill:#2F6BFF}html[data-theme=dark] [stroke="#FFD43B"]{stroke:#7FA4FF}
html[data-theme=dark] [fill="#F25C3B"]{fill:#D63AF9}html[data-theme=dark] [stroke="#F25C3B"]{stroke:#D63AF9}
html[data-theme=dark] [fill="#7DB2F7"]{fill:#7C4DFF}html[data-theme=dark] [stroke="#7DB2F7"]{stroke:#7C4DFF}
html[data-theme=dark] .lift:hover{box-shadow:14px 14px 0 #D63AF9 !important}
html[data-theme=dark] .tile:hover{box-shadow:0 6px 0 #D63AF9}
html[data-theme=dark] .btn:hover{box-shadow:6px 6px 0 #2F6BFF !important}
@keyframes dotfill-d{0%,36%{background:#D63AF9;width:38px}37%,100%{background:#FFFFFF;width:22px}}
html[data-theme=dark] .dot{animation-name:dotfill-d;border-color:#0B0B0F}
html[data-theme=dark] [style*="radial-gradient(#F25C3B"]{background-image:radial-gradient(#D63AF9 2px,transparent 2.5px) !important}
html[data-theme=dark] [style*="background: #111111"][style*="border-radius: 50%"]{box-shadow:0 0 0 2px #D63AF9}
@media (max-width: 760px){.thanks-sticker{position:static !important;align-self:flex-end;margin-top:8px}}
html[data-theme=dark] [style*="box-shadow: 4px 4px 0 #111111"]{box-shadow:4px 4px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 4px 4px 0 #F25C3B"]{box-shadow:4px 4px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 4px 4px 0 #FFD43B"]{box-shadow:4px 4px 0 #2F6BFF !important}
html[data-theme=dark] [style*="box-shadow: 6px 6px 0 #111111"]{box-shadow:6px 6px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 6px 6px 0 #F25C3B"]{box-shadow:6px 6px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 6px 6px 0 #FFD43B"]{box-shadow:6px 6px 0 #2F6BFF !important}
html[data-theme=dark] [style*="box-shadow: 8px 8px 0 #111111"]{box-shadow:8px 8px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 8px 8px 0 #F25C3B"]{box-shadow:8px 8px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 8px 8px 0 #FFD43B"]{box-shadow:8px 8px 0 #2F6BFF !important}
html[data-theme=dark] [style*="box-shadow: 10px 10px 0 #111111"]{box-shadow:10px 10px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 10px 10px 0 #F25C3B"]{box-shadow:10px 10px 0 #D63AF9 !important}
html[data-theme=dark] [style*="box-shadow: 10px 10px 0 #FFD43B"]{box-shadow:10px 10px 0 #2F6BFF !important}
html[data-theme=dark] [style*="background: #F25C3B"] [style*="0 #111111"]{box-shadow:6px 6px 0 #0B0B0F !important}
html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]),html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [style*="color: #111111"],html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) a,html[data-theme=dark] a:is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]){color:#111111 !important}
html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [style*="color: #3D3A35"]{color:#3D3A35 !important}
html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [style*="color: #6A645A"],html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [style*="color: #5C564C"]{color:#6A645A !important}
html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [style*="color: #C2361A"],html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [style*="color: #F25C3B"],html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) a:hover{color:#A62BC8 !important}
html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [fill="#111111"]{fill:#111111}html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [stroke="#111111"]{stroke:#111111}
html[data-theme=dark] [style*="color: #FFFFFF"],html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) [style*="color: #FFFFFF"],html[data-theme=dark] :is([style*="background: #FFFFFF"],[style*="background: #25D366"],[style*="background: #DCD6CB"],[style*="background: #CFC8BC"]) a[style*="color: #FFFFFF"]{color:#FFFFFF !important}