/* Presentation only: returning Home, Box Home, and ritual entrances. */
.depth-home{
 background:radial-gradient(ellipse 95% 320px at 95% 0,rgba(185,155,114,.075),transparent 80%),radial-gradient(ellipse 65% 420px at 0 45%,rgba(114,81,105,.035),transparent 85%);
}
.depth-home .boxcard{
 background-image:linear-gradient(145deg,rgba(255,253,249,.3),transparent 65%);
 box-shadow:inset 0 1px rgba(255,255,255,.6),0 3px 12px rgba(66,39,53,.035);
 border-color:rgba(66,39,53,.07);
}
.depth-home .home-feature,.depth-box .tool,.depth-box .richcard{
 box-shadow:inset 0 0 0 1px rgba(101,74,85,.065),0 3px 12px rgba(66,39,53,.022);
 background-image:linear-gradient(150deg,rgba(255,255,255,.45),transparent 80%);
}
.depth-home .todaycard{
 background-image:radial-gradient(ellipse at 100% 0,rgba(185,155,114,.15),transparent 72%);
 box-shadow:inset 0 1px rgba(255,248,230,.15),0 4px 16px rgba(66,39,53,.045);
}
.depth-home .home-future-note{
 background-image:linear-gradient(120deg,rgba(255,251,238,.35),transparent);
 box-shadow:inset 3px 0 #b59a73,inset 0 1px rgba(255,255,255,.55),0 3px 12px rgba(66,39,53,.025);
}
/* These tones follow the existing mood-0…3 Box card sequence. */
.depth-box{--world:238,226,230;background:linear-gradient(180deg,rgba(var(--world),.36),rgba(var(--world),.12) 360px,transparent 740px)}
.depth-box.depth-mood-1{--world:231,232,223}
.depth-box.depth-mood-2{--world:238,229,216}
.depth-box.depth-mood-3{--world:229,229,237}
.depth-box .box-mood:not(.has-photo){
 background:linear-gradient(140deg,rgba(255,253,249,.42),transparent 85%),rgb(var(--world));
 box-shadow:inset 0 1px rgba(255,255,255,.7),inset 0 0 0 1px rgba(101,74,85,.07),0 5px 16px rgba(66,39,53,.035);
}
.depth-box .box-mood:not(.has-photo):after{pointer-events:none;border-color:rgba(185,155,114,.22)}
.depth-box .box-mood.has-photo{box-shadow:0 4px 16px rgba(66,39,53,.06)}
.depth-box .box-counts{color:#776670}
.depth-box .richstack{border-radius:18px;background:rgba(var(--world),.14)}
.depth-box .setting{border-bottom-color:rgba(101,74,85,.1)}
/* Reuse the existing icons as small chapter markers, without adding artwork. */
.depth-home [data-home-feature="vision"],.depth-box [data-tool="vision"]{--chapter:#e9e9e1}
.depth-home [data-home-feature="affirmations"],.depth-box [data-tool="affirmations"]{--chapter:#eee2e7}
.depth-home [data-home-feature="journal"],.depth-box [data-tool="journal"]{--chapter:#eee7da}
.depth-home [data-home-feature="audio"],.depth-box [data-tool="audio"]{--chapter:#e7e4ef}
.depth-home [data-home-feature="person"],.depth-box [data-tool="person"]{--chapter:#efe2e5}
.depth-box [data-tool="memories"]{--chapter:#eee6d8}
.depth-box :is(.toolicon,.tileicon){background:var(--chapter,#eee5e8);box-shadow:inset 0 1px rgba(255,255,255,.6)}
.depth-home .feature-heading>.icon{background:var(--chapter,#eee5e8);border-radius:6px;box-shadow:0 0 0 3px var(--chapter,#eee5e8)}
.screen:has(>.ritual-group) .ritual-morning{
 background:radial-gradient(ellipse at 10% 0,rgba(255,251,229,.6),transparent 85%),#eee4d4;
 box-shadow:inset 0 1px rgba(255,255,255,.7),inset 0 0 0 1px rgba(185,155,114,.12);
}
.screen:has(>.ritual-group) .ritual-night{
 background:linear-gradient(140deg,#eee8ef,#e3dae8);
 box-shadow:inset 0 1px rgba(255,255,255,.55),inset 0 0 0 1px rgba(87,52,72,.08);
}
.depth-ritual.depth-morning{background:radial-gradient(ellipse 90% 400px at 50% 10%,rgba(233,208,158,.2),transparent 85%)}
.depth-ritual.depth-night{background:radial-gradient(ellipse 100% 460px at 50% 12%,rgba(145,115,151,.16),transparent 90%)}
.depth-morning .breath{background:radial-gradient(circle,#fffaf0 18%,#efe3c9 70%,#f7efe1);box-shadow:0 0 0 10px rgba(229,209,177,.13);color:#97774f}
.depth-night .breath{background:radial-gradient(circle,#f8f3f6 18%,#dfd2e2 70%,#ece3ed);box-shadow:0 0 0 10px rgba(145,115,151,.09);color:#785c79}
/* Short entry motion, no added continuous animation or layout changes. */
@keyframes depth-arrive{from{opacity:.82;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 .depth-home,.depth-box,.depth-ritual{animation:depth-arrive .24s ease-out both}
 :is(.depth-home,.depth-box) :is(.boxcard,.home-feature,.tool,.richcard,.todaycard),.ritual-group .scene{transition:transform .16s ease-out,box-shadow .16s ease-out}
 :is(.depth-home,.depth-box) :is(.boxcard,.home-feature,.tool,.richcard,.todaycard):active,.ritual-group .scene:active{transform:scale(.995)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :is(.depth-home,.depth-box) :is(.home-feature,.tool,.richcard):hover,.ritual-group .scene:hover{transform:translateY(-1px)}
}
@media(prefers-reduced-motion:reduce){
 .depth-home,.depth-box,.depth-ritual,.depth-ritual .breathing{animation:none!important}
 :is(.depth-home,.depth-box) button,.ritual-group .scene{transition:none!important;transform:none!important}
}