/* =========================================================
   SkinZenitude — Résultats SQE
   Hana — présentation radiale
   V4
   ========================================================= */

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#e9dfd0;
}

body{
  font-family:Arial,sans-serif;
  overflow:hidden;
}

#results-page{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  display:block;
}

#results-scene{
  position:absolute;
  inset:0;
  width:100vw;
  height:100vh;
  margin:0;
  line-height:0;
  overflow:visible;
}

#results-background{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}

/* =========================================================
   HANA
   ========================================================= */

#hana{
  --hana-color:rgba(220,225,230,.92);

  position:absolute;
  left:32%;
  top:59%;
  width:200px;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:20;
  pointer-events:none;
}

#hana-flower-wrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  cursor:pointer;
  z-index:3;
}

#hana-flower{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.82;
  transform:scale(1);
  transform-origin:center;
  filter:brightness(.72) saturate(2.2) hue-rotate(170deg);
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.22,1,.36,1),
    filter .45s ease;
  user-select:none;
  -webkit-user-drag:none;
}

@keyframes hana-breathe{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:.94;transform:scale(1.035)}
}

#hana:not(.hana-open) #hana-flower{
  animation:hana-breathe 1.5s ease-in-out infinite;
}

/* Comme Ava : grossissement au survol. */
#hana-flower-wrap:hover #hana-flower{
  opacity:1;
  transform:scale(1.10);
  filter:brightness(.72) saturate(2.2) hue-rotate(170deg) drop-shadow(0 8px 16px rgba(60,60,60,.12));
}

/* =========================================================
   FILS
   ========================================================= */

#hana-links{
  position:absolute;
  inset:-100%;
  width:300%;
  height:300%;
  overflow:visible;
  z-index:2;
  pointer-events:none;
}

.hana-line{
  stroke:var(--hana-color);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:0;
  transition:opacity .55s ease;
}

#hana.hana-open .hana-line{
  opacity:.88;
}

/* =========================================================
   TITRES
   ========================================================= */

#hana-choices{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.hana-choice{
  position:absolute;
  width:max-content;
  max-width:min(280px,24vw);
  padding:.20rem .45rem;

  transform:translate(-50%,-50%) scale(.92);
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  color:rgba(255,255,255,.96);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(11px,.88vw,15px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:.01em;
  text-align:center;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(30,30,30,.35);

  background:rgba(65,58,52,.18);
  border:1px solid rgba(255,255,255,.25);
  border-radius:3px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);

  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22,1,.36,1),
    background .2s ease;
}

#hana.hana-open .hana-choice{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.hana-choice:hover,
.hana-choice:focus-visible{
  background:rgba(65,58,52,.30);
}

/* Les pétales non associés restent dans la fleur :
   ils seront visuellement atténués sans supprimer la fleur. */
#hana.hana-has-1 #hana-flower,
#hana.hana-has-2 #hana-flower,
#hana.hana-has-3 #hana-flower,
#hana.hana-has-4 #hana-flower,
#hana.hana-has-5 #hana-flower{
  /* La fleur reste intacte pour cette première passe.
     L'atténuation individuelle des pétales viendra avec
     une couche graphique dédiée. */
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){
  #hana{
    left:30%;
    top:66%;
    width:clamp(100px,24vw,145px);
  }

  .hana-choice{
    max-width:43vw;
    font-size:clamp(10px,2.7vw,13px);
  }
}


/* =========================================================
   AVA — RESULTS
   Ava est posée sur la paume de Saphyia.
   Les coordonnées sont volontairement des variables simples.
   ========================================================= */
#results-scene > #ava{
  --results-ava-x:58%;
  --results-ava-y:46%;
  --results-ava-size:8%;

  position:absolute !important;
  left:var(--results-ava-x) !important;
  top:var(--results-ava-y) !important;
  right:auto !important;
  bottom:auto !important;
  width:var(--results-ava-size) !important;
  height:auto !important;
  z-index:40 !important;
  opacity:0;
  transform:translate(-50%,-50%) scale(.82);
  pointer-events:auto;
}

#results-scene > #ava.ava-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* Menu Ava : quatre directions, à ajuster après le premier test. */
#results-scene > #ava .ava-child:nth-child(1){left:50%;top:-115%;}
#results-scene > #ava .ava-child:nth-child(2){left:-125%;top:50%;}
#results-scene > #ava .ava-child:nth-child(3){left:50%;top:215%;}
#results-scene > #ava .ava-child:nth-child(4){left:225%;top:50%;}


@media(max-width:700px){

  html,
  body{
    width:100%;
    min-height:100%;
    height:100%;
    overflow:hidden;
  }

  #results-page,
  #results-scene{
    width:100%;
    width:100dvw;
    height:100%;
    height:100dvh;
    min-height:100svh;
  }

  /*
   * Mobile utilise réellement l'image portrait dédiée.
   * La balise picture évite de charger la grande image desktop
   * comme fond de remplacement.
   */
  #results-background-picture{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
  }

  #results-background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
  }

  /*
   * Hana reste dans la zone de table, mais avec une taille
   * suffisamment généreuse pour être réellement utilisable au doigt.
   */
  #hana{
    left:50%;
    top:68%;
    width:clamp(112px,30vw,155px);
  }

  .hana-choice{
    max-width:42vw;
    padding:.28rem .42rem;
    font-size:clamp(11px,3.05vw,14px);
    line-height:1.12;
  }

  /*
   * On mobile, titles stay close to Hana.
   * Le rayon est aussi réduit dans resultat.js.
   */
  #hana-links{
    inset:-115%;
    width:330%;
    height:330%;
  }

  /*
   * Ava is positioned near Saphyia's hand in the portrait image.
   */
  #results-scene > #ava{
    --results-ava-x:73%;
    --results-ava-y:27%;
    --results-ava-size:35%;
    max-width:none;
  }

  /*
   * The Ava menu must remain inside the screen.
   * Panels can be slightly more compact on mobile.
   */
  #results-scene > #ava .ava-panel{
    font-size:clamp(10px,2.7vw,13px);
    white-space:nowrap;
  }
}


/* CELL — IMAGE DÉDIÉE */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #results-page,
  #results-scene {
    width: 100%;
    width: 100dvw;
    height: 100%;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
  }

  #results-background-picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #results-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  #hana {
    left: 50%;
    top: 68%;
    width: clamp(112px, 30vw, 155px);
  }

  #results-scene > #ava {
    --results-ava-size: 35%;
    max-width: 77px;
  }
}


/* FINAL MOBILE IMAGE — RESULT EN */
@media (max-width:700px){
  #results-background-picture{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:0;
  }

  #results-background{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
}