/* ============================================================
   ERAO — feuille unique.
   Regle d'arbitrage : le fond est mineral, le feu est contenu.
   ============================================================ */

@font-face{font-family:Marcellus;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/marcellus-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Marcellus;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/marcellus-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Sora;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/sora300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Sora;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/sora300-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* les huit — voir CLAUDE.md */
  --void:#04050A; --stone:#0A0D14; --nacre:#E7EAF2; --ash:#6E7688;
  --jade:#5FD8C4; --indigo:#8E86F0; --rose:#E9A6C6; --gold:#E8C68A;

  --display:Marcellus,"Times New Roman",serif;
  --ui:Sora,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);

  --stone-size:clamp(152px,46vmin,196px);
  --stone-y:46%;
  --below:calc(var(--stone-y) + var(--stone-size)/2 + 48px);

  /* ecrits par le moteur : respiration 0→1, inclinaison -1→1.
     --amp est l'amplitude du souffle. Elle passe de .055 au repos a .15
     pendant le rituel : la pierre respire plus profondement quand on la
     rejoint. L'interpolation est faite en JS, image par image, pour ne
     pas dependre de @property. --glow suit, pour que le feu batte avec. */
  --breath:0; --tx:0; --ty:0;
  --amp:.055; --glow:.21;
  --gold-mix:0;
}

@media (min-aspect-ratio:1/1){:root{--stone-y:47%}}
/* iPhone SE et compagnie : ecran court, la pierre remonte et retrecit */
@media (max-height:700px){:root{--stone-size:clamp(124px,38vmin,150px);--stone-y:40%}}

*{margin:0;padding:0;box-sizing:border-box}
/* Le fond est peint sur html AUSSI. Sans ca, quand Safari retracte ou
   deploie ses barres, la bande decouverte n'appartient a personne et
   l'immersion se casse. C'est html qui peint le canevas du navigateur. */
html{height:100%;background:var(--void);overflow:hidden}
body{
  background:var(--void); color:var(--nacre);
  font-family:var(--ui); font-weight:300;
  /* inset:0 plutot que 100dvh : un element fixe ainsi cale epouse toujours
     exactement ce qui est visible, quoi que fassent les barres du navigateur. */
  position:fixed; inset:0; overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:1px solid rgba(95,216,196,.55);outline-offset:7px;border-radius:2px}

/* ——————————————————————— matiere ——————————————————————— */

#dust{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.glows{position:fixed;inset:0;z-index:0;pointer-events:none;
  /* le plan le plus lointain : il bouge le moins */
  transform:translate3d(calc(var(--tx)*-13px),calc(var(--ty)*-13px),0)}
.glow{position:absolute;display:block;border-radius:50%;will-change:transform}
.glow--jade{width:118vmin;height:118vmin;left:-34%;top:-16%;
  background:radial-gradient(circle,rgba(95,216,196,.075) 0%,rgba(95,216,196,.055) 22%,rgba(95,216,196,.028) 45%,rgba(95,216,196,.008) 70%,rgba(95,216,196,0) 100%);
  animation:driftA 61s ease-in-out infinite}
.glow--indigo{width:136vmin;height:136vmin;right:-40%;bottom:-22%;
  background:radial-gradient(circle,rgba(142,134,240,.07) 0%,rgba(142,134,240,.05) 22%,rgba(142,134,240,.025) 45%,rgba(142,134,240,.007) 70%,rgba(142,134,240,0) 100%);
  animation:driftB 47s ease-in-out infinite}
@keyframes driftA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6vmin,-4vmin,0) scale(1.08)}
  66%{transform:translate3d(-4vmin,5vmin,0) scale(.96)}}
@keyframes driftB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-5vmin,4vmin,0) scale(.94)}
  70%{transform:translate3d(4vmin,-6vmin,0) scale(1.07)}}

/* Un halo DERRIERE la pierre — pas autour d'elle. La nuance est tout :
   une lueur qui sort de la pierre en ferait une lampe. Une lumiere posee
   derriere en fait une masse sombre devant une source. La pierre reste
   la chose la plus noire de l'ecran, et c'est ce qui lui donne sa presence.
   Il respire avec elle, et s'efface quand l'or monte a la fin. */
.halo{position:fixed;left:50%;top:var(--stone-y);z-index:1;pointer-events:none;
  width:min(132vw,620px);height:min(132vw,620px);border-radius:50%;
  transform:translate(-50%,-50%) scale(calc(.93 + var(--breath)*.11));
  translate:calc(var(--tx)*-7px) calc(var(--ty)*-7px);
  opacity:calc((.55 + var(--breath)*.45) * var(--cool,1));
  /* Le coeur le plus clair tombe DERRIERE la pierre, donc on ne le voit pas :
     ce qu'on voit est la couronne qui deborde de son pourtour. C'est ainsi
     qu'une source occultee se lit — par ce qui reste autour d'elle. */
  background:radial-gradient(circle,
    rgba(164,224,216,.3) 0%,
    rgba(150,200,206,.2) 14%,
    rgba(124,158,198,.088) 27%,
    rgba(98,118,168,.034) 43%,
    rgba(72,90,140,.01) 63%,
    rgba(60,76,120,0) 100%)}

.vignette{position:fixed;inset:-6%;z-index:1;pointer-events:none;
  translate:calc(var(--tx)*-8px) calc(var(--ty)*-8px);
  background:radial-gradient(130% 110% at 50% var(--stone-y),transparent 22%,rgba(0,0,0,.24) 48%,rgba(0,0,0,.52) 76%,rgba(0,0,0,.72) 100%)}

.grain{position:fixed;inset:-8%;z-index:2;pointer-events:none;opacity:.045;
  /* le grain est sur la vitre : il bouge a peine, et a contresens */
  translate:calc(var(--tx)*3px) calc(var(--ty)*3px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)} 16%{transform:translate3d(-3%,2%,0)}
  33%{transform:translate3d(2%,-3%,0)} 50%{transform:translate3d(-2%,-2%,0)}
  66%{transform:translate3d(3%,1%,0)} 83%{transform:translate3d(-1%,3%,0)}
  100%{transform:translate3d(0,0,0)}}

/* ——————————————————————— le signe ——————————————————————— */

.mark{position:fixed;left:50%;top:max(10.5vh,calc(env(safe-area-inset-top) + 42px));z-index:6;
  transform:translate(-50%,-14px);opacity:0;
  transition:opacity 2000ms var(--ease),transform 2000ms var(--ease);pointer-events:none}
.mark.is-on{opacity:1;transform:translate(-50%,0)}
.mark svg{display:block;overflow:visible}
.mark__rule{stroke:var(--ash);opacity:.55;
  animation:markTurn 64s linear infinite}
@keyframes markTurn{to{stroke-dashoffset:-30}}

/* ——————————————————————— la pierre ——————————————————————— */

.anchor{position:fixed;left:50%;top:var(--stone-y);transform:translate(-50%,-50%);z-index:7}

.stone{
  position:relative;display:grid;place-items:center;isolation:isolate;
  width:var(--stone-size);height:var(--stone-size);border-radius:50%;overflow:hidden;
  transform:scale(calc(1 + var(--breath)*var(--amp)));
  box-shadow:0 26px 70px rgba(0,0,0,.62);
  opacity:0;transition:opacity 2400ms var(--ease);
  will-change:transform;touch-action:manipulation;
}
.stone.is-on{opacity:1}
.stone::after{ /* la nuit reprend la pierre sur tout son pourtour */
  content:"";position:absolute;inset:0;border-radius:50%;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 14px 2px rgba(2,4,8,.78),
             inset 0 0 34px 16px rgba(2,4,8,.5),
             inset 0 -16px 22px -13px rgba(0,0,0,.9)}
.stone__rim{ /* une arete eclairee, pas un cercle trace */
  position:absolute;inset:0;border-radius:50%;z-index:6;pointer-events:none;
  background:
    linear-gradient(158deg,rgba(231,234,242,.34) 0%,rgba(231,234,242,.11) 15%,rgba(231,234,242,.02) 29%,rgba(231,234,242,0) 44%),
    linear-gradient(rgba(231,234,242,.026),rgba(231,234,242,.026));
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.3px),#000 calc(100% - 1.3px));
  mask:radial-gradient(closest-side,transparent calc(100% - 1.3px),#000 calc(100% - 1.3px))}
@supports not ((mask:radial-gradient(#000,#000)) or (-webkit-mask:radial-gradient(#000,#000))){
  .stone__rim{background:none;box-shadow:inset 0 0 0 1px rgba(231,234,242,.09)}}

.stone__body{position:absolute;inset:0;border-radius:50%;z-index:1;
  /* un cabochon taille, pas une sphere : la lumiere vient d'une direction,
     et l'assombrissement se joue au bord, pas depuis le centre. */
  background:
    radial-gradient(128% 96% at 50% 116%,rgba(2,4,8,.92) 0%,rgba(2,4,8,0) 58%),
    linear-gradient(161deg,#111826 0%,#0A0F19 38%,#05080E 72%,#03050A 100%)}
/* l'or : il n'existe qu'a la fin, et il ne depend pas du feu froid */
.stone__body::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 46% 40%,rgba(232,198,138,.6) 0%,rgba(232,198,138,.16) 32%,transparent 60%);
  filter:blur(13px);opacity:var(--gold-mix);transition:opacity 3400ms var(--ease)}

.stone__fire{position:absolute;inset:0;border-radius:50%;z-index:2;
  mix-blend-mode:screen;filter:blur(13px) saturate(126%);
  opacity:calc(.29 + var(--breath)*var(--glow));
  transform:translate3d(calc(var(--tx)*13px),calc(var(--ty)*13px),0)}

/* Le feu d'une opale n'est pas rond : ce sont des veines allongees, orientees,
   qui se croisent et changent d'angle quand la pierre tourne. */
.seam{position:absolute;display:block;will-change:transform}
.seam--jade{width:98%;height:29%;left:-7%;top:21%;opacity:var(--cool,1);
  background:radial-gradient(closest-side,rgba(95,216,196,.88) 0%,rgba(95,216,196,.34) 40%,rgba(95,216,196,0) 100%);
  animation:veineA 47s ease-in-out infinite;transition:opacity 3000ms var(--ease)}
.seam--indigo{width:90%;height:25%;left:5%;top:51%;opacity:var(--cool,1);
  background:radial-gradient(closest-side,rgba(142,134,240,.8) 0%,rgba(142,134,240,.3) 40%,rgba(142,134,240,0) 100%);
  animation:veineB 61s ease-in-out infinite;transition:opacity 3000ms var(--ease)}
.seam--glint{width:48%;height:15%;left:21%;top:33%;opacity:var(--cool,1);
  background:radial-gradient(closest-side,rgba(160,236,220,.7) 0%,rgba(95,216,196,.2) 46%,rgba(95,216,196,0) 100%);
  animation:veineC 37s ease-in-out infinite;transition:opacity 3000ms var(--ease)}
.seam--rose{width:54%;height:18%;left:25%;top:43%;opacity:0;
  background:radial-gradient(closest-side,rgba(233,166,198,.72) 0%,rgba(233,166,198,.24) 42%,rgba(233,166,198,0) 100%);
  animation:veineD 43s ease-in-out infinite}
@keyframes veineA{
  0%,100%{transform:rotate(-25deg) translate3d(0,0,0) scaleX(1)}
  50%{transform:rotate(-12deg) translate3d(6%,8%,0) scaleX(1.13)}}
@keyframes veineB{
  0%,100%{transform:rotate(17deg) translate3d(0,0,0) scaleX(1)}
  50%{transform:rotate(6deg) translate3d(-7%,-6%,0) scaleX(.88)}}
@keyframes veineC{
  0%,100%{transform:rotate(-54deg) translate3d(0,0,0) scaleX(.92)}
  50%{transform:rotate(-36deg) translate3d(11%,-9%,0) scaleX(1.2)}}
@keyframes veineD{
  0%,100%{transform:rotate(36deg) translate3d(0,0,0) scaleX(1)}
  50%{transform:rotate(21deg) translate3d(-6%,7%,0) scaleX(1.1)}}

.stone__sheen{position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none;
  /* un eclat serre et allonge : surface polie et dure. Plus le grand reflet
     diffus d'une bille. Le second, en bas, est le rebond interne du dome. */
  background:
    radial-gradient(24% 5.5% at 30% 10%,rgba(231,234,242,.26) 0%,rgba(231,234,242,.1) 34%,rgba(231,234,242,.02) 66%,rgba(231,234,242,0) 100%),
    radial-gradient(22% 6.5% at 70% 88%,rgba(231,234,242,.05) 0%,rgba(231,234,242,.016) 44%,rgba(231,234,242,0) 100%);
  transform:translate3d(calc(var(--tx)*-6px),calc(var(--ty)*-6px),0)}

.stone__ripples{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:5;pointer-events:none}
.ripple{position:absolute;left:50%;top:50%;
  width:var(--stone-size);height:var(--stone-size);
  margin:calc(var(--stone-size)/-2) 0 0 calc(var(--stone-size)/-2);
  border-radius:50%;
  background:radial-gradient(circle,transparent 52%,rgba(95,216,196,.4) 60%,rgba(142,134,240,.26) 70%,transparent 82%);
  animation:ripple 1100ms var(--ease) forwards}
@keyframes ripple{from{transform:scale(.05);opacity:.6}to{transform:scale(2.4);opacity:0}}

.stone__label{position:relative;z-index:7;display:grid;place-items:center;pointer-events:none}
.word{grid-area:1/1;font-family:var(--display);line-height:1;white-space:nowrap;
  opacity:0;transition:opacity 1000ms var(--ease)}
.word.is-on{opacity:1}
.word--name{font-size:clamp(19px,5.1vmin,23px);letter-spacing:.34em;text-indent:.17em;
  background:linear-gradient(100deg,#DBDFEA 0%,#DBDFEA 20%,#B2DDD3 32%,#DBDFEA 44%,#DBDFEA 60%,#BCB7E8 72%,#DBDFEA 84%,#DBDFEA 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nacre 54s linear infinite}
@keyframes nacre{to{background-position:-300% 0}}
.word--breath{font-size:clamp(15px,4vmin,17px);letter-spacing:.28em;text-indent:.14em;
  color:rgba(231,234,242,.68)}
/* Sans animation, la respiration n'a plus aucun support visible.
   C'est le seul cas ou le mot revient. */
@media (prefers-reduced-motion:no-preference){
  .word--breath{display:none}}

/* ——————————————————————— rituel ——————————————————————— */

.clock{position:fixed;right:max(22px,calc(env(safe-area-inset-right) + 22px));
  top:max(24px,calc(env(safe-area-inset-top) + 20px));z-index:8;
  font-size:10.5px;letter-spacing:.3em;text-indent:.15em;color:rgba(110,118,136,.5);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity 1400ms var(--ease)}
.clock.is-on{opacity:1}

.phrase{position:fixed;left:50%;top:var(--below);z-index:6;
  transform:translateX(-50%);width:min(84vw,430px);display:grid;pointer-events:none}
.phrase__line{grid-area:1/1;text-align:center;font-family:var(--display);
  font-size:clamp(19.5px,5vmin,23px);line-height:1.66;letter-spacing:.014em;
  color:rgba(231,234,242,.82);text-wrap:balance;
  opacity:0;transition:opacity 1500ms var(--ease)}
.phrase__line.is-on{opacity:1}

.leave{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 104px);z-index:8;
  transform:translate(-50%,10px);text-align:center;
  opacity:0;transition:opacity 1400ms var(--ease),transform 1400ms var(--ease)}
.leave.is-on{opacity:1;transform:translate(-50%,0)}
.leave__btn{font-size:10.5px;letter-spacing:.3em;text-indent:.15em;text-transform:uppercase;
  color:rgba(231,234,242,.66);padding:10px 18px;transition:color 500ms var(--ease)}
.leave__btn:hover{color:rgba(231,234,242,.92)}

.aside{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 38px);z-index:8;
  transform:translateX(-50%);padding:12px 18px;white-space:nowrap;
  font-size:10.5px;font-weight:300;letter-spacing:.16em;color:rgba(110,118,136,.3);
  opacity:0;visibility:hidden;
  transition:opacity 1800ms var(--ease),color 600ms var(--ease),visibility 0s linear 1800ms}
.aside.is-on{opacity:1;visibility:visible;
  transition:opacity 1800ms var(--ease),color 600ms var(--ease),visibility 0s}
.aside:hover{color:rgba(110,118,136,.62)}

/* ——————————————————————— la fin ——————————————————————— */

.bloom{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% var(--stone-y),rgba(232,198,138,.5) 0%,rgba(232,198,138,.15) 12%,rgba(232,198,138,.04) 26%,transparent 44%);
  transform:scale(.1);transform-origin:50% var(--stone-y);
  transition:opacity 4200ms var(--ease),transform 4600ms var(--ease)}
.bloom.is-on{opacity:.72;transform:scale(1)}

.ending{position:fixed;left:50%;top:var(--below);z-index:8;transform:translateX(-50%);
  width:min(84vw,430px);text-align:center}
.ending__line{font-family:var(--display);font-size:clamp(19px,4.8vmin,22px);line-height:1.66;
  color:rgba(231,234,242,.82);text-wrap:balance;
  opacity:0;transition:opacity 2200ms var(--ease)}
.ending__btn{display:inline-block;margin-top:38px;padding:10px 18px;
  font-size:10.5px;letter-spacing:.3em;text-indent:.15em;text-transform:uppercase;
  color:rgba(231,234,242,.6);opacity:0;transition:opacity 1800ms var(--ease),color 500ms var(--ease)}
.ending__btn:hover{color:rgba(231,234,242,.9)}
.ending.is-on .ending__line{opacity:1}
.ending.is-on .ending__btn{opacity:1;transition-delay:1400ms}

/* ——————————————————————— mouvement reduit ——————————————————————— */

@media (prefers-reduced-motion:reduce){
  .glow,.grain,.mark__rule,.seam,.word--name,.ripple{animation:none!important}
  .stone__fire{opacity:.34!important}
  .stone{transform:none!important}
  .bloom.is-on{transform:scale(1);opacity:.34}
  .bloom{transition:opacity 900ms linear}
}