:root {
    --glow-color: rgb(249, 255, 216);
    --glow: drop-shadow(0 0 .3em var(--glow-color));
    --bg-color: #392440;
    --primary-color: #FF82A9;
    --secondary-color: #7F95D1;
    --transition-duration: .5s;
}
*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--bg-color);
    transition: background-color var(--transition-duration) ease;
}

body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-screen {
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity var(--transition-duration) ease;
}
.title-screen.disappear {
    opacity: 0;
}

.title-screen h1 {
    color: var(--primary-color);
    text-align: center;
    font-size: 4em;
    letter-spacing: -1%;
    font-weight: 670;
    text-shadow: 0 0 .4em rgba(206, 127, 248, 0.444);
    margin-block: .5em;
}
.title-screen * {
    display: block;
    font-family: "Rubik";
}
.title-screen button {
    background: var(--primary-color);
    color: #4b2f50;
    font-weight: 480;
    margin-block: .4em;
    text-shadow: 0 0 1em whitesmoke;
    cursor: pointer;
    border-radius: .35em;
    appearance: none;
    border: none;
    padding: .45em .6em;
    font-size: 1.5em;
    transition: box-shadow .3s ease, color .3s ease;
    box-shadow: 0 0 .4em .1em rgba(206, 127, 248, 0.3);
}
.title-screen button:hover {
    color: rgba(254, 212, 255, .9);
    box-shadow: 0 0 .4em .2em rgba(206, 127, 248, 0.344);
}

.scene-container {
    --height: 100vh;
    --ratio: calc(1352 / 845);
    --width: calc(var(--height) * var(--ratio));
    --font-size: calc(var(--height) * .0268);
    font-size: var(--font-size);
    width: var(--width);
    height: var(--height);
    position: relative;
    background-image: url("assets/scenes/scene-sans-objet.svg");
    background-repeat: no-repeat;
    background-size: contain;
    animation: fade-in var(--transition-duration) ease forwards;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.scene-container svg {
    --size: 5em;
    display: block;
    width: var(--size);
    height: var(--size);
    overflow: visible;
}

.scene-container.fade-out {
    opacity: 0;
}

.hoverable-object {
    cursor: pointer;
    transition: filter 0.27s ease;
    transform-origin: center;
}
.hoverable-object:hover,
.object-selected {
    transform-origin: center;
    filter: var(--glow);
    animation: wiggle 420ms steps(6, end) .27s;
}
.object-selected {
    cursor: grab;
    /* animation: wiggle 420ms steps(6, end) .27s inf; */
}
.done {
    animation: disappear .5s ease forwards;
}

@keyframes disappear {
    to {
        opacity: 0%;
    }
}

#Calque-collier-chien,
#Calque-music-box,
#Calque-caillou,
#Calque-dessin,
#Calque-maneki,
#Calque-fauteuil,
#Calque-sweat,
#Calque-ticket,
.Calque-carton {
    position: absolute;
}

#Calque-collier-chien {
    --size: 2em;
    left: 17.5em;
    top: 12.8em;
}
#Calque-music-box {
    --size: 4em;
    right: 15.5em;
    top: 9em;
}
#Calque-caillou {
    --size: 2em;
    z-index: 20;
    right: 18.2em;
    bottom: 19.65em;
}
#Calque-dessin {
    --size: 7.4em;
    right: 25.2em;
    top: 9.1em;
}
#Calque-maneki {
    --size: 4em;
    left: 5.5em;
    top: 17.7em;
}
#Calque-fauteuil {
    --size: 15.3em;
    right: 2.8em;
    bottom: 4.5em;
}
#Calque-sweat {
    --size: 4.7em;
    left: 46.3%;
    bottom: 16.3em;
}
#Calque-ticket {
    --size: 2.7em;
    right: 24em;
    bottom: 6.4em;
}



/* Cartons */
.Calque-carton {
    --size: 11em !important;
    --inline-offset: 5em;
    z-index: 50;
    bottom: 0;
    transform-origin: center;
    opacity: 0;
    transform: translateY(1em);
    transition: opacity .25s ease, transform .5s ease;
}
.Calque-carton.active {
    opacity: 1;
    transform: none;
}

.Calque-carton.keep {
    left: var(--inline-offset);
}
.Calque-carton.throw {
    right: var(--inline-offset);
}


@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(-2deg); }
  33%  { transform: rotate(2deg); }
  50%  { transform: rotate(-2deg); }
  66%  { transform: rotate(1deg); }
  83%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}


.scene-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fade-in .4s ease forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.scene-overlay img {
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    cursor: pointer;
}

.hidden {
    display: none;
}

.scene-caption {
    position: absolute;       /* 画面に対して固定表示 */
    left: 50%;
    bottom: 5%;            /* 下から5%くらい上 */

    width: 60vw;           /* 横幅は画面の80% */
    padding: .5em .6em;
    
    background: rgba(255, 255, 255, 0.8); /* 半透明の白 */
    color: #000;           /* テキストは黒 */
    
    border-radius: .4em;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);

    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    font-family: Geologica, sans-serif;

    opacity: 0;
    transform: translate(-50%, 50%); /* 少し下から浮いてくる */
    transition: opacity 300ms ease, transform 300ms ease;

    z-index: 2000;         /* scenePhoto より上に */
    pointer-events: none;  /* テキストボックスは操作不要なので消しておく */
}

.scene-caption.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.scene-caption.hidden {
    display: none;
}

.fade-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;              
  pointer-events: none;  
  transition: opacity 0.6s ease;
  z-index: 900;           
}

.fade-overlay.visible {
  opacity: 1;
  pointer-events: auto;    
}



@media screen and (max-width: 1044px) {
    .title-screen {
        font-size: .7em;
    }
}

@media screen and (max-aspect-ratio: 1352/845) {
    .scene-container {
        --height: calc(var(--width) * var(--ratio));
        --ratio: calc(845 / 1352);
        --width: 100vw;
        --font-size: 1.67vw;
    }
}